# How to observe a property?

**URL:** <https://forums.fusetools.com/t/how-to-observe-a-property/2058>\
**Category:** General\
**Created:** [January 26, 2016, 1:51pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058 "2016-01-26T13:51:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marcelo\_Alves](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/marcelo_alves/32/86_2.png) [@Marcelo\_Alves](https://forums.fusetools.com/u/Marcelo_Alves)\
**Post date:** [January 26, 2016, 1:51pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/1 "2016-01-26T13:51:01Z")

</div>

`TL;DR:` How can I observe a property that is inside a custom class?

I’m struggling with the following :

I’m creating a ToolbarButton class. I have a property called “Image” defined as :

`<string ux:Property="Image" ux:Value="" />`

Later, in my JS code I need to access that `Image` property to generate filenames for `MultiDensityImageSource`, but when I try to :

`var baseName = "Assets/toolbar-" + self.Image + ".png";`

The `Image` property is `undefined` (I was expecting an empty string). Also, it wouldn’t work if I changed the Image property externally, so, how can I watch for changes in the Image property?

(Also, sorry if it is a dumb question, I’m not an expert in the latest JS technologies)

---

<div class="post-metadata">

**Author:** ![Gianko](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/gianko/32/141_2.png) [@Gianko](https://forums.fusetools.com/u/Gianko)\
**Post date:** [January 27, 2016, 5:19am UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/2 "2016-01-27T05:19:14Z")

</div>

I think you need to use Observables and {}

`<string ux:Property="Image" ux:Value="{imageValue}" />`

and in your JS

```auto
    var Observable = require("FuseJS/Observable");
    var imageValue = Observable('');

```

If you need to pass an arg from UX to JS I think you have to use [userevents](https://www.fusetools.com/learn/fusejs#userevents-js-userevents)

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 27, 2016, 8:52am UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/3 "2016-01-27T08:52:29Z")

</div>

Hi!

Data-binding the ux:Property (like Gianko suggest) would be the right way to access a ux:Property from JS. Unfortunately this does not work in the current release, but it will in 0.9.8 (which will be released this week).

Here is some example code of how it can be done:

```auto
<App Theme="Basic">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            var JSProperty = Observable("Foobar");
            module.exports = { JSProperty: JSProperty };
        </JavaScript>

        <Panel ux:Class="Foo" ux:Name="self" MyProperty="test">
            <string ux:Property="MyProperty" />
            <DataBinding Target="self.MyProperty" Key="JSProperty" />
            <Text Value="{Property self.MyProperty}" />
        </Panel>

        <Foo />
    </Panel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Marcelo\_Alves](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/marcelo_alves/32/86_2.png) [@Marcelo\_Alves](https://forums.fusetools.com/u/Marcelo_Alves)\
**Post date:** [January 27, 2016, 11:22am UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/4 "2016-01-27T11:22:06Z")

</div>

Oooh, nice!

Can’t wait for the new release!

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 3, 2016, 5:20pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/5 "2016-11-03T17:20:46Z")

</div>

Does this feature still work (in v0.28.1) as advertised in this thread?

DataBinding a `ux:Property` does not seem to pass across the property value when including `<Foo MyProperty="value" />`

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 4, 2016, 12:24pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/6 "2016-11-04T12:24:15Z")

</div>

This has since changed. Currently all ux:Property declarations are already available as observables from JS:

```auto
<string ux:Property="Text" />
<JavaScript>
    this.Text.value = "setting the property value from JS";
</JavaScript>

```

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 4, 2016, 6:44pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/7 "2016-11-04T18:44:02Z")

</div>

Hmm… Sorry to hijack this old thread now, but that actually doesn’t work for me :S (in v0.28.1)

I get `ReferenceError: Text is not defined` if I try using:

```auto
<Panel ux:Class="propertyTest">
	<string ux:Property="Text" />
	<JavaScript>
		Text.value = "setting the property value from JS";
	</JavaScript>
</Panel>

```

If I use a databinding it obviously works, and can be modified, but the binding is not initiated with the original property value I pass in.

Sorry, feel free to delete this and I’ll start a new thread if this is a bug report or more complex query. I was just curious if the initial example was still relevant to current Fuse.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 7, 2016, 11:37am UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/8 "2016-11-07T11:37:35Z")

</div>

Sorry! This should have been

```auto
this.Text.value = "setting the property value from JS";

```

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 7, 2016, 5:06pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/9 "2016-11-07T17:06:06Z")

</div>

Ahh I’m stupid. Cheers

---

<div class="post-metadata">

**Author:** ![branko.ilic](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/branko.ilic/32/232_2.png) [@branko.ilic](https://forums.fusetools.com/u/branko.ilic)\
**Post date:** [July 3, 2017, 12:27pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/10 "2017-07-03T12:27:42Z")

</div>

HI!  
I am using

```
<string ux:Property="SetAddress" />
<JavaScript>
	function setDefaultAddress(args) {
		this.SetAddress.Value = "setting the property value from JS";
	}
	module.exports = {
		setDefaultAddress: setDefaultAddress
	}
</JavaScript>

```

and get error on running setDefaultAddress function:  
Error: TypeError: Cannot set property ‘value’ of undefined: Name: TypeError: Cannot set property ‘value’ of undefined

can you help me?

---

<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:** [July 3, 2017, 6:20pm UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/11 "2017-07-03T18:20:00Z")

</div>

Hi Branco,

instead of posting on old threads, please make a new forum post with a complete, minimal reproduction that manifests the problem and can be copy-pasted and run.

---

<div class="post-metadata">

**Author:** ![branko.ilic](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/branko.ilic/32/232_2.png) [@branko.ilic](https://forums.fusetools.com/u/branko.ilic)\
**Post date:** [July 4, 2017, 8:15am UTC](https://forums.fusetools.com/t/how-to-observe-a-property/2058/12 "2017-07-04T08:15:18Z")

</div>

Hi, I have managed setting Property by `<Set searchLocRow.SetAddress.value="{address}"/>`

```auto
<Rectangle ux:Class="SearchLocationRow" ux:Name="searchLocRow" Width="100%" Color="#f9f9f9" Height="45" >
	<string ux:Property="SetAddress" />
	<Panel Padding="7,0,7,0" >
		<StackPanel >
			<Text Value="{address}" Font="Regular" TextColor="Black" FontSize="13" Alignment="CenterLeft" />
			<Clicked>
				<Change locContent.Opacity="1" Duration=".1"/>
				<Set searchLocRow.SetAddress.value="{address}"/>
			</Clicked>
		</StackPanel>
	</Panel>
</Rectangle>

```