Appcelerator Titanium Hello Alloy Model

_readme

Hello Model

Models are useful for updating controls based on data updates. Without models when data changes you need to manually update every control that is associated with the data (e.g. label, tableVIew, …). By binding your controls to a model, you can simply update the model’s data and all the controls will be updated automatically.

Here are the steps for a basic model demo. For reference, the online docs are here:

http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Data_Binding-section-36739592_AlloyDataBinding-Model-ViewBinding


* Add model and select “properties”




* In XML, add reference to model

<Alloy>
	<Model src="mymodel"/>
	<Window class="container" layout="vertical">
	….

* In XML can bind model field to controls using {} syntax. Note that fields (sliderValue, sliderValue2 do not need to be defined or declared anywhere and their values will be set in the controller).

		<Label id="sliderValLBL" top="10" text="{mymodel.sliderValue}" />
		<Slider id="mySlider2" top="60" width="60%" value="{mymodel.sliderValue2}"/>

* In the controller, create a reference to the model

$M = Alloy.Models.mymodel;

* You can create computed fields using transforms

$M.transform = function() {
	return _.extend($M.toJSON(), {
		sliderValue2: $M.get("sliderValue")*2
	});
};

* You can initialize the fields prior to opening the controller

$M.set("sliderValue",0);

* You can set the model field values at any time (e.g. when data is retrieved from a wen service)

$M.set("sliderValue",$.mySlider1.value);

* Remember to call the $.destroy() method when you close the controller to prevent memory leaks.

function cleanup(){
	$.destroy();
}

=====================================
DEMO CODE
=====================================
app/models/mymodel.js

exports.definition = {
	config: {
		adapter: {
			type: "properties",
			collection_name: "mymodel"
		}
	},
	extendModel: function(Model) {
		_.extend(Model.prototype, {
			// extended functions and properties go here
		});

		return Model;
	},
	extendCollection: function(Collection) {
		_.extend(Collection.prototype, {
			// extended functions and properties go here
		});

		return Collection;
	}
};

=====================================
app/views/index.xml

<Alloy>
	<Model src="mymodel"/>
	<Window class="container" layout="vertical">
		<Slider id="mySlider1" top="60" width="60%" />
		<Label id="sliderValLBL" top="10" text="{mymodel.sliderValue}" />
		<Slider id="mySlider2" top="60" width="60%" value="{mymodel.sliderValue2}"/>
	</Window>
</Alloy>

=====================================
app/controllers/index,js

$M = Alloy.Models.mymodel;

$M.transform = function() {
	return _.extend($M.toJSON(), {
		sliderValue2: $M.get("sliderValue")*2
	});
};

$M.set("sliderValue",0);

$.mySlider1.addEventListener('change', function() {
	//following line updates the label and the second slider value
	$M.set("sliderValue",$.mySlider1.value);
});

$.index.open();

function cleanup(){
	$.destroy();
}



index.js

$M = Alloy.Models.mymodel;

$M.transform = function() {
	return _.extend($M.toJSON(), {
		sliderValue2: $M.get("sliderValue")*2
	});
};

$M.set("sliderValue",0);

$.mySlider1.addEventListener('change', function() {
	//$.sliderValLBL.text = $.slider.value;
	$M.set("sliderValue",$.mySlider1.value);
});

$.index.open();

function cleanup(){
	$.destroy();
}

index.xml

<Alloy>
	<Model src="mymodel"/>
	<Window class="container" layout="vertical">
		<Slider id="mySlider1" top="60" width="60%" />
		<Label id="sliderValLBL" top="10" text="{mymodel.sliderValue}" />
		<Slider id="mySlider2" top="60" width="60%" value="{mymodel.sliderValue2}"/>
	</Window>
</Alloy>

mymodel.js

exports.definition = {
	config: {
		// columns: {value: "Number"},
		// defaults: {value: "0"},
		adapter: {
			// type: "sql",
			type: "properties",
			collection_name: "mymodel"
		}
	},
	extendModel: function(Model) {
		_.extend(Model.prototype, {
			// extended functions and properties go here
		});

		return Model;
	},
	extendCollection: function(Collection) {
		_.extend(Collection.prototype, {
			// extended functions and properties go here
		});

		return Collection;
	}
};

Hey - you forgot to reference your cleanup function on Window close event - so your leaking bud!

change your Window declaration in the XML to :
<Window class="container" layout="vertical" onClose="cleanup">

😛