Observable and object

How-to Discussions
1

Hi guys , i’ve a question about observable and object , this is what my case looks like.
when i change something in the object , i want to get back the whole object with values who changed, there is a way that i can do this ?

<App>
  <DockPanel>
    <JavaScript>
    var Observable = require("FuseJS/Observable");


  var data = Observable(
  {
    "customer": {
      "address": "string",
      "birthDate": "2017-06-10T19:02:36.375Z",
      "birthLocation": "string",
      "companyName": "string",
      "deliveredDate": "2017-06-10T19:02:36.375Z",
      "displayName": "string",
      "swicth": false,
      "driverLicense": {
        "deliveredDate": "2017-06-10T19:02:36.375Z",
        "deliveredLocation": "string",
        "number": "string"
      }
    }
  }
  )





    data.onValueChanged(module, function(x){
      console.log(JSON.stringify(x))
    })




    module.exports = {
      data: data,
    }

    </JavaScript>

    <DockPanel>
    <With  Data="{data.customer}">
      <StackPanel>
        <TextInput Value="{birthDate}"/>
        <TextInput Value="{driverLicense.deliveredLocation}"/>
        <Switch Value="{swicth}"/>
      </StackPanel>
    </With>
    </DockPanel>
  </DockPanel>

</App>
2

Hi prince,

single-value observable notifies its subscribers when the whole value of it changes. Meaning, you can not change a property on an object within an observable and expect the subscribers to be notified.

This will not work:

var data = Observable({test: "test1"});
data.value.test = "test2";

This will work:

var data = Observable({test: "test1"});
data.value = {test: "test2"};

Hope this helps!

3

So if i understand, i need to set ValueChanged function on each TextInput i have or other things i need to watch changes, get the data who changed and affect it to the whole object data ?

4

That’s one way to do it, yes (with the risk of landing in an infinite loop). Or you can use nested observables. Or you can rethink your structure and use a separate Observable for each property you need to observe on that object.

5

any exemple on how can i use nested observable here to watch changes , my data object is huge

6

You’re asking a conceptual question, and one can only provide a conceptual answer for that. In this case, it would be: “make a model”. Even if your data object is huge as you say, you likely do not need to observe all properties on it. A good implementation of a stand-alone JS module should take care of that.

I imagine that alone does not help much, so I need to suggest you spend some time reading on MVVM pattern and see how it’s applied in the Tutorial.

7

Uldis wrote:

single-value observable notifies its subscribers when the whole value of it changes. Meaning, you can not change a property on an object within an observable and expect the subscribers to be notified.

This will not work:

var data = Observable({test: "test1"});
data.value.test = "test2";

This will work:

var data = Observable({test: "test1"});
data.value = {test: "test2"};

This was exactly what I needed! Thanks Uldis!