Nativescript: Feature Request - Nested Bindable Observables

[sitefinitysteve]

Reference Issue: https://github.com/NativeScript/NativeScript/issues/2436#issuecomment-232643180

Basically right now we need to do this:

viewModel = new Observable({
  filter: {
    labels: new Observable({
      apply: "",
      cancel: "",
    })
  }
});

In order for child properties to notify of changes, it's not intuitive and a tad overly complex.

KendoUI on the otherhand manages to have a single root observable and every child property at _any level_ just becomes observable with no extra work... reducing code complexity, potential slack\SO questions... and it just looks nicer

viewModel = new Observable({
    filter: {
            labels: {
                apply: "",
                cancel: "",
            }
    }
});

Kendo Sample: http://dojo.telerik.com/OCUkA

[nsndeck]

Done with commit #2469

[sitefinitysteve]

HOORAY @nsndeck !

[mnahkies]

@nsndeck I'd just like to point out that whilst I agree that the previous behaviour was somewhat unintuitive, that the new behaviour should be clearly noted and possibly even considered a breaking change.

I'm actually getting a runtime exception with this change:

file:///app/tns_modules/data/observable/observable.js:141:34: JS ERROR TypeError: undefined is not an object (evaluating 'this.disableNotifications[data.propertyName] = true')

Can't see any obvious cause of this, but I do currently have complex object hierarchies attached to observables that I didn't expect or intend to become recursively observable.

[spstratis]

@mnahkies I'm having the same issue as you now that I updated to 2.2.0. What was your approach to get around it if you don't mind me asking. I find that in certain cases just removing any nested Observables seems to fix the issue.

[tjvantoll]

While I’m a big fan of this feature, this change is a fairly major breaking change that will affect a whole lot of people.

The big problem I hit is that I was using an ObservableArray within an Observable, and when I upgraded to 2.2 I get the runtime exception that @mnahkies mentions above. I can get the error to go away by switching my ObservableArray to a vanilla Array, but, I then have problems getting ListViews to subscribe to the plain array appropriately.

I’m going to see what we can do to address this asap. At a minimum we need documentation explaining the changes.

[spstratis]

@tjvantoll Thanks for the feedback. Is it possible for devs to rollback their TNS versions? If so could you link to a doc that outlines the process? Thanks!

[tjvantoll]

@spstratis Yep.

1) Remove your node_modules and platforms folders.
2) Change the "tns-android", "tns-ios", and "tns-core-modules" version numbers in your package.json back to 2.1.0.
3) Run tns install to use the old values.

There’s a chance you’ll also have to revert your NativeScript CLI version, but you’ll probably be fine running the 2.2 CLI with older versions of the modules and runtimes.

[mnahkies]

@spstratis we've been working around this by not upgrading our release branches, and by reverting the change to tns-core-modules/data/observable/observable.ts by pull request #2469 otherwise

[nsndeck]

Hi all,
A little update from me. I've just push a change in the master branch (will be available with @next build, also we think for an option to make quick 2.2.1 release to be available officially). The change is some kind of a breaking. We marked Observable constructor that takes json object as deprecated (it is still working as before - creates an Observable with properties and sets values (one level only)), but later we should delete it. We replaced it with two static functions fromJSON and fromJSONRecursive that will do its job while giving an option to create Observables for all nested objects or not.

Issue mentioned by @mnahkies and @tjvantoll (thanks a lot for the hint and info about error) is fixed. The problem comes from the fact that ObservableArray is actually not a javascript array (Array.isArray(observableArray) returns false) and the code is trying to make it Observable.

[tjvantoll]

I confirmed that using switching my example from new Observable({}) to Observable.fromJSON({}) fixed the issue for me using “next”. Unfortunately though it doesn’t look like this fix made it into 2.2.1, so we’ll have to stick with “next” to workaround the problem until 2.2.2.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.