Using Models

Creating Object Oriented Models
CoffeeScript is recommended for easier understanding.

This documentation will use binder.model object to store all observable model instances.
Each property in this object is instance of observable model.

Intuitive data binding

Binder packages comes with Knockout JS ES5 enchanced plugin. It provides access to properties in a more natural way. This means, that accessing observable properties in HTML does not require brackets - even when accessing deeply nested value.

Example below will bind deeply nested property of Maslosoft.Koe.Nested model instance:

<input data-bind="textInput: binder.model.nested.rawI18N.name.en"></input>
<div data-bind="text: binder.model.nested.rawI18N.name.en"></div>

Result of this code is below. Try to change input value:

Creating Model

View model in binder package is instance of class. So that it can be reused or extended at will.

To use EcmaScript 5 observable properties, model must extend from Maslosoft.Binder.Model class. Using this class provides facility to track nested objects and nested arrays of objects. The constructor of this class accepts data parameter (of type object) that will assign passed properties to newly created model instance.

Model should also have property _class, which is used internally.
This property must have value same as fully qualified class name.

To create new model, extend from Maslosoft.Binder.Model and add properties - of which all will be observable:

class @Maslosoft.Models.MyChecklist extends @Maslosoft.Binder.Model
	_class: "Maslosoft.Models.MyChecklist"
	id: 0
	title: ''
	items: []

Relevant code used in examples:

<input data-bind="textInput: binder.model.nested.rawI18N.name.en"></input>
<div data-bind="text: binder.model.nested.rawI18N.name.en"></div>
<script>
	window.onload = (function () {­
		binder.model.nested = new Maslosoft.Koe.Nested({­
		rawI18N:{­
			name:{­
				en:"January",
				pl:"Styczeń"
			­},
			description:{­
				en:"First month of a year",
				pl:"Pierwszy miesiąc roku"
			­}
		­}­});

		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>