Observe changes to object properties

How-to Discussions
1

Is it possible to define an object and detect when the properties changes and update the view with those changes?

<App>
  <StatusBarBackground Dock="Top" />

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

    function Book(title, number) {
      	this.title = title;
      	this.number = number;

      	this.changeNumber = function(num) {
        	this.number = 2;
    	};
    }

    var BookList = Observable(
      new Book("SomeBookTitle", 001)
    );

    module.exports = {
    	BookList
    }
  </JavaScript>

  	<DockPanel>
    	<StackPanel Orientation="Vertical">
	    	<Each Items="{BookList}">
	      		<Panel Margin="10" Padding="10" Alignment="Left" Width="100%">
	        		<Text Value="{title}" Alignment="Left" TextColor="#0000FF"/>
	        		<Text Value="{number}" Alignment="Right" TextColor="#FF0000"/>
	      		</Panel>
                        <Rectangle ux:Name="MyButton" Width="300" Height="60" Color="#c74877" Padding="10" CornerRadius="5">
				<Text Value="Change Number" Color="#fff" Alignment="HorizontalCenter" FontSize="20" />
				<Clicked>
					<Callback Handler="{changeNumber}" />
				</Clicked>
			</Rectangle>
	    	</Each>
	</StackPanel>
  	</DockPanel>
</App>
2

Yes. In order to achieve that, you need to make the properties Observable themselves. Like so:

    function Book(title, number) {
        this.title = title;
        this.number = Observable(number);

        this.changeNumber = function(num) {
            this.number.value = 2;
        };
    }
3

Works like a charm thanks :slight_smile: