Skip to content

Cannot bind backgroundColor to a layout #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
tjvantoll opened this issue May 18, 2018 · 4 comments
Closed

Cannot bind backgroundColor to a layout #229

tjvantoll opened this issue May 18, 2018 · 4 comments

Comments

@tjvantoll
Copy link
Contributor

Version

1.3.1

Reproduction link

https://play.nativescript.org/?template=play-vue&id=L8tcfY&v=3

Platform and OS info

iOS 11, NativeScript 4.0.1

Steps to reproduce

Run https://play.nativescript.org/?template=play-vue&id=L8tcfY&v=3.

What is expected?

The page will render with a red box.

What is actually happening?

The app crashes with an NSInvalidArgument exception.

This one is messing with me. If you do backgroundColor="red" the example works, but if you bind to a string with "red" it fails. I have no idea what’s going on, but any help would be appreciated. It’s possible that this affects more than just the backgroundColor property, but that’s what I hit.
@rigor789
Copy link
Member

This is a limitation due to the way ListViews work in NativeScript, the views defined in the template have to be created up-front before the list goes through the items and tries to render them. That is a bit problematic because we don't have the data required within the template, and to solve this ns-vue uses a deeply nested Proxy object - which returns a Proxy up to the maximum depth of 10:

nativescript-vue/platform/nativescript/runtime/components/v-template.js

Lines 103 to 108 in 93ea971

createView() {
const vnode = this._scopedFn(deepProxy({}))
const nativeView = patch(null, vnode).nativeView
nativeView[VUE_VIEW] = vnode
return nativeView
}

nativescript-vue/platform/nativescript/util/index.js

Lines 99 to 116 in 93ea971

export function deepProxy(object, depth = 0) {
return new Proxy(object, {
get(target, key) {
if (key === 'toString' || key === 'valueOf') {
return () => ''
}
if (key === Symbol.toPrimitive) {
return hint => hint
}
if (depth > 10) {
throw new Error('deepProxy over 10 deep.')
}
return deepProxy({}, depth + 1)
}
})
}

To avoid this, you unfortunately need to add a type check (or anything that prevents setting the backgroundColor property in this case to a Proxy object), example:
https://play.nativescript.org/?template=play-vue&id=L8tcfY&v=5

@rigor789
Copy link
Member

I am interested to try if we can return nothing from the createView() function, and let the view patching part of the ListView take care of creating the views. I'll look into it.

@rigor789 rigor789 mentioned this issue May 20, 2018
Closed
@tjvantoll
Copy link
Contributor Author

Thanks for the fast reply and workaround as always @rigor789—really appreciate it.

Just to note the Angular plugin doesn’t have this same problem, so I’m wondering what was done there to handle the same situation. If you need any help on my end let me know.

@nativescript-vue-bot
Copy link
Collaborator

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.

@nativescript-vue nativescript-vue locked as resolved and limited conversation to collaborators Jul 3, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tjvantoll @rigor789 @nativescript-vue-bot