# Passing observables through properties (ux:Property : object)

**URL:** <https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902>\
**Category:** How-to Discussions\
**Created:** [February 16, 2017, 5:18pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902 "2017-02-16T17:18:11Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [February 16, 2017, 5:18pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/1 "2017-02-16T17:18:11Z")

</div>

Hi guys,

regarding [Passing observables through properties](https://www.fusetools.com/docs/basics/creating-components#passing-observables-through-properties), I would like to know how I get the value from (in this case) `passedInObservable` variable.

For example, in my case I want to pass an Object like this `{ year: 2017, month: 1, day: 3 }`.

I have a property on my Component

```auto
<object ux:Property="DateToShow"/>

```

And my component is “called” like this:

```auto
<Tim.MyComponent DateToShow ="{dateToShow}"/>

```

where `dateToShow` is an observable with the value above.

In my component I have

```auto
var dateToShow = this.DateToShow;

```

and the output is:

```auto
{
	"_origin": -159,
	"_subscribers": [{
		"version": 2,
		"active": true
	}],
	"_isProxy": false,
	"_values": [{
		"_origin": -180,
		"_subscribers": [{
			"version": 2,
			"active": true
		}, {
			"version": 2,
			"active": true
		}],
		"_isProxy": false,
		"_values": [{
			"year": 2017,
			"month": 1,
			"day": 3
		}],
		"_beganSubscriptions": true
	}],
	"_beganSubscriptions": true
}

```

**Note:** if I use `var dateToShow = this.DateToShow.inner();` it outputs

```auto
{
	"_origin": -161,
	"_subscribers": [],
	"_isProxy": true,
	"_values": [],
	"_subscriptionWatchers": [{
		"watcherId": 18
	}]
}

```

If I try `dataToShow.value` it returns `Fuse.Scripting.JavaScriptCore.Object`. In a desperate attempt I’ve tried `dataToShow.value.value`, still the same output.

On the other hand, if the `Property` type is a `string` it all works like a charm.

I’m guessing this happens because “If we pass an Observable in, `this.Propertyname` will contain an observable with the observable we passed through.”

So how do I get the value from that observable? There is a better way to do this?

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [February 23, 2017, 12:26pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/2 "2017-02-23T12:26:12Z")

</div>

I really liked some help on this. I got it work with`<string ux:Property="DateToShow"/>` but it’s not as classy as with `<object ux:Property="DateToShow"/>`.

---

<div class="post-metadata">

**Author:** ![Bjorn\_Egil\_Hansen](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bjorn\_Egil\_Hansen](https://forums.fusetools.com/u/Bjorn_Egil_Hansen)\
**Post date:** [May 29, 2017, 6:29pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/3 "2017-05-29T18:29:45Z")

</div>

I have the same issue, trying to make a nice wrapper of [nekronos/FuseNativeControls](https://github.com/nekronos/FuseNativeControls). I’m want to bind the date value as Observable from the page where it is used, using the binding both to set initial value and to hold the selected value.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 30, 2017, 3:04pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/4 "2017-05-30T15:04:11Z")

</div>

Hey everyone,

to me it seems you’re all missing one single point about the passed-in Observables: they are reactive. And as such, you can not access them directly in functional code. As an example, I have prepared this snippet for you to look at:

```auto
<App>

    <Panel ux:Class="MyComponent" Height="56">
        <object ux:Property="DateToShow" />
        <JavaScript>
            var localDateObject = this.DateToShow.inner();
            var dateString = localDateObject.map(function(obj) {
                return obj.day + "/" + obj.month + "/" + obj.year;
            });
            module.exports = {
                dateString: dateString
            };
        </JavaScript>
        <Text Value="{dateString}" Alignment="Center" />
    </Panel>

    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var dateToShow = Observable({day: 4, month: 5, year: 2017}); // may the fourth be with you this year too
        module.exports = {
            dateToShow: dateToShow
        };
    </JavaScript>

    <MyComponent DateToShow="{dateToShow}" />

</App>

```

If we’re talking two-way mapping, then matters get complicated. For that, I suggest you take a look at the code in [this pull request](https://github.com/fusetools/fuse-samples/pull/55) which should explain the concepts.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Wilton\_Augusto](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/wilton_augusto/32/336_2.png) [@Wilton\_Augusto](https://forums.fusetools.com/u/Wilton_Augusto)\
**Post date:** [May 30, 2017, 3:24pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/5 "2017-05-30T15:24:42Z")

</div>

I am having the same problem.

Whem I pass an observable to a ux:Class through a “object ux:Property” and I try to access it in the javascript it returns always null. Even with the map function you suggested the value is inaccessible in the javascript

```auto
<Panel ux:Class="My.Class" >
	<object ux:Property="Data"/>
	<JavaScript>
		var d = this.Data.inner();
		var data = cd.map(function(val){
			return val;
		});
		console.log(JSON.stringify(data));
	</JavaScript>
</Panel>

<JavaScript>
	var Observable = require("FuseJS/Observable");
	var cData = Observable();
	var line = [5,4,9,7,3,0,10,8,9,7];
	cData.add(line);
	module.exports.cData = cData;
</JavaScript>
<My.Class Data="{cData}"/>

```

```auto
Output
[Viewport]: {"_origin":-50,"_subscribers":[],"_isProxy":true,"_values":[],"_subscriptionWatchers":[{"watcherId":15}]}

```

I am usin the MyClass as a template. I dont know if this has samething to do with the problem.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 30, 2017, 3:30pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/6 "2017-05-30T15:30:10Z")

</div>

Wilton, you only emphasise my point about the reactive nature of the Observable there:

```auto
var data = d.map(function(val){
	return val;
});
// data CAN NOT be accessed in functional style like you do here:
console.log(JSON.stringify(data));

```

If you want to log the value, do it inside of the `.map`. Make sure you _consume_ the resulting observable, too:

```auto
var d = this.Data.inner();
var data = d.map(function(val){
    console.log(JSON.stringify(val));
    return val;
});
data.subscribe(module);

```

Alternatively, for debugging purposes, if the resulting Observable is a single-value Observable, you can add a logger-subscriber to it:

```auto
var d = this.Data.inner();
var data = d.map(function(val){
    return val;
});
data.onValueChanged(module, function(val) {
    console.log(JSON.stringify(val));
});

```

---

<div class="post-metadata">

**Author:** ![Wilton\_Augusto](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/wilton_augusto/32/336_2.png) [@Wilton\_Augusto](https://forums.fusetools.com/u/Wilton_Augusto)\
**Post date:** [May 30, 2017, 3:46pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/7 "2017-05-30T15:46:59Z")

</div>

This worked now.

```auto
var d = this.Data.inner();
var data = d.map(function(val){
    console.log("Map:"+JSON.stringify(val));
    return val;
});
data.onValueChanged(module, function(val) {
    console.log(JSON.stringify(val));
});

[Viewport]: Map:[5,4,9,7,3,0,10,8,9,7]
[Viewport]: [5,4,9,7,3,0,10,8,9,7]

```

Thank’s Uldis

---

<div class="post-metadata">

**Author:** ![Bjorn\_Egil\_Hansen](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bjorn\_Egil\_Hansen](https://forums.fusetools.com/u/Bjorn_Egil_Hansen)\
**Post date:** [May 31, 2017, 10:51am UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/8 "2017-05-31T10:51:47Z")

</div>

Thanks for pointing me in the right direction, Uldis!

After a bit of trial and failure, I ended up with a pretty nice solution, supporting two-way binding:

```auto
<Panel ux:Class="DatePicker">
  <object ux:Property="Date" />
  <object ux:Property="MinDate" />
  <object ux:Property="MaxDate" />
  <JavaScript>
      var date = this.Date.innerTwoWay();
      var minDate = this.MinDate.inner();
      var maxDate = this.MaxDate.inner();

      date.onValueChanged(function(newValue){
        // Assumes datePicker checks for same value to prevent endless updates
        if (newValue) datePicker.setDate(newValue);
      });

      minDate.onValueChanged(function(newValue){
        if (newValue) datePicker.setMinDate(newValue);
      });

      maxDate.onValueChanged(function(newValue){
        if (newValue) datePicker.setMaxDate(newValue);
      });

      datePicker.CurrentDate.addSubscriber(function () {
        date.value = datePicker.CurrentDate.value;
      });

  </JavaScript>
  <StackPanel>
    <NativeViewHost>
      <Native.DatePicker ux:Name="datePicker" />
    </NativeViewHost>
  </StackPanel>
</Panel>

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 31, 2017, 11:34am UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/9 "2017-05-31T11:34:19Z")

</div>

Hi Bjørn,

nice it helped. Your code obviously has the apparent infinite loop problem lurking out every corner, and `.addSubscriber()` is a very bad practice - because you should also remove the subscriber yourself, otherwise you’re leaking memory. Fix those and you’re golden.

A better solution could be implemented by using either `.mapTwoWay` or `.innerTwoWay` on those Observables, just like in the PR link I posted.

---

<div class="post-metadata">

**Author:** ![Bjorn\_Egil\_Hansen](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bjorn\_Egil\_Hansen](https://forums.fusetools.com/u/Bjorn_Egil_Hansen)\
**Post date:** [May 31, 2017, 12:20pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/10 "2017-05-31T12:20:18Z")

</div>

Hi Uldis,

Thanks for your feedback!

I’m already using `.innerTwoWay` on the `Date`-object. I tried just binding to `Native.DatePicker`´s `CurrentDate` like:

```auto
<Native.DatePicker ux:Name="datePicker" CurrentDate="{Property Date}" />

```

However, that didn’t work.

I replaced the `.addSubscriber()`-part with:

```auto
        datePicker.CurrentDate.onValueChanged(function (newValue) {
          if (date.value && newValue
            && date.value.year === newValue.year
            && date.value.month === newValue.month
            && date.value.day === newValue.day) {
            return;
          }

          date.value = newValue;
        });

```

I guess that will fix the memory leak issue.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 31, 2017, 12:21pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/11 "2017-05-31T12:21:46Z")

</div>

not unless you replace the first line there with this 🙂

```auto
datePicker.CurrentDate.onValueChanged(module, function (newValue) {

```

---

<div class="post-metadata">

**Author:** ![Bjorn\_Egil\_Hansen](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bjorn\_Egil\_Hansen](https://forums.fusetools.com/u/Bjorn_Egil_Hansen)\
**Post date:** [May 31, 2017, 12:25pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/12 "2017-05-31T12:25:29Z")

</div>

Oops, thanks again 😉

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [June 1, 2017, 11:12am UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/13 "2017-06-01T11:12:47Z")

</div>

Philosophically it is important to remember that Fuse is built with a model/view/view-model mindset, where the model is kept strictly separate from the view-models, view-models transform data for consumption in the view, and commute interactions with the view back to the model: Because of this it’s absolutely necessary to reason about the use/consumption of any data passed through a view model, and to have an understanding of the view-model’s purpose.

Think of it this way: A view-model is a transform that takes data from a source and offers an alternative representation to be consumed by a view. If the data does not need to be transformed, you do not need a view-model, you can databind directly to the untransformed data. In other words, with good architecture you should never have synchronous need for the data contained in `this.Parameter`, only async/reactive representations of it. When interactions happen in the view, you communicate those interactions back to the model through its static representation, ie `require('MyApp').onUserDataChanged(newData)`, the model is mutated, your reactive bindings update, your view-model updates, your UI updates. This is the reactive data flow in a well designed Fuse app.

Another tip for avoiding conceptual headaches: Never forget about `combineLatest`. Using a single `combineLatest` you can aggregate a context where you have access to every single observable value in a synchronous scope. It is IMO one of the most useful reactive operators.

---

<div class="post-metadata">

**Author:** ![Bjorn\_Egil\_Hansen](https://avatars.discourse-cdn.com/v4/letter/b/838e76/32.png) [@Bjorn\_Egil\_Hansen](https://forums.fusetools.com/u/Bjorn_Egil_Hansen)\
**Post date:** [June 2, 2017, 4:04pm UTC](https://forums.fusetools.com/t/passing-observables-through-properties-ux-property-object/3902/14 "2017-06-02T16:04:13Z")

</div>

MVVM and reactive is fine, but I wonder how you can make general, reusable components, like a DatePicker, if they need to know about the global scope where they are used?