How to observe a property?

General
1

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)

2

I think you need to use Observables and {}

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

and in your JS

    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

3

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:

<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>
4

Oooh, nice!

Can’t wait for the new release!

5

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" />

6

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

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

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:

<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.

8

Sorry! This should have been

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

Ahh I’m stupid. Cheers

10

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?

11

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.

12

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

<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>