BINDING INSTRUCTIONS: - ice-bind and ice-listen attribute: ice-bind="leftExpr:rightExpr" or ice-listen="leftExpr:rightExpr", leftExpr is always element property of lambda with element property as input, rightExpr is always data model property or lamba with data model property as input value - when binding from element to data model, to convert data to specific type (Number, Boolean, String), set type name next to elment property: ice-bind="value(Number):model.Size", this may be used with lambda expr. on right side - if binding using function or lamba expression, data can be bound from data model to elment only: style.backgroundColor:(DataItem)=>..., reversed binding from element to data model is not possible - binding from element to data model using function or lambda to transcode data from backgroundColor and than assign to data model: (style.backgroundColor)=>.... : model.BackColor, this way style.backgroundColor is sent to lamba expr. and return value from lambda expr is assigned to model.BackColor - examples: (value)=>value ? 'one' : 'two' ::: model.LastName;;; use ::: for safety, ::: is supported now !value : model.LastName IMPORTANT: - repeater element should have display:none, it's visibility will be set on data bound by the Ice engine, if repeater element has display:none, repeater's templates doesn't need diplay:none - optional: repeater's templates should have display:none set to hide it until the html is parsed (on initial page load), when template is used, it's visibility will be set by the Ice engine - repeater definition: ice-bind="repeater:dataSource" - repeater template: ice-bind="template:footer", supported templates: nodata, header, footer, item, alternating, separator Example: var ob = new Ice.ObservableBinder().SetDataSource(source = { text: "ovo je sadrzaj neki bez veze", html: "ovo je moj html", state: { isActive: true, ClickedChk: function (sender, ev, binder, dataProperty) // dataProperty is full property path, in this case: state.ClickedChk { // event handler, "this" is _dataSource binder.SetValue("state.isActive", !this.state.isActive); }, DoSomething: function (sender, ev, binder, dataProperty) { // event handler, "this" is _dataSource console.log("DoSomething: " + dataProperty); }, DivClick: function (sender, ev, binder, dataProperty) { // event handler, "this" is _dataSource var stack = printStackTrace(); alert(stack.join("\r\n")); } }, selitems: [ { Text: "zero", Value: 0, Color: "green", Ages: [1, 2, 5, 8] }, { Text: "one", Value: 1, Selected: true, Color: "red", Ages: [3, 5] }, { Text: "two", Value: 2, Color: "magenta", Ages: [] }, { Text: "three", Value: 3, Selected: true, Color: "blue" }, { Text: "four", Value: 4, Color: "red", Selected: true } ] }); ob.DataBind("body"); Html: **************************************************************