Kendoui> framework> mvvm> Overview

Model View view-model is a design mode to help developers better layer the data layer model and view layer view. The view-model layer exposes the interaction data between the model layer and the view layer.

Kendo mvvm is an mvvm implementation. It can be seamlessly integrated with the Kendo component (widgets) and Data Source (datasource.

First,

We want to create a view-model object, which is generated based on your model data. The specific method is to pass in a JS object to the Kendo. observable method.

VaR viewmodel = kendo. observable ({
Name: "John Doe ",
Displaygreeting: function (){
VaR name = this. Get ("name ");
Alert ("hello," + name + "!!! ");
}
});

Then, we create a view, which is an HTML element used to bind the view-model.

<Div id = "View">
<Input data-bind = "value: Name"/>
<Button data-bind = "click: displaygreeting"> display greeting </button>
</Div>

From the code, we can see that the value attribute of the input element is bound to the name field of view-model. Therefore, when the value of the view-model name field changes, the value of the input element also changes. On the contrary, the value of the input element changes, and the value of the Name field of view-model also changes. And the changes are real-time.

We also see that the Click Event of the button element is bound to the dispalygreeting method of view-model. When you click the button, the displaygreeting method is called.

Finally, we bind the view and view-model.

Kendo. BIND ($ ("# View"), viewmodel );

About binding:

Binding format,<binding name>: <view model field or method>Of course, you can also bind other attributes of HTML elements,Source, HTML, ATTR, visible, enabled, and so on. Of course, you can bind multiple HTML elements consecutively, such

Data-bind = "value: name, visible: isnamevisible ". Or bind it as follows:<Div data-bind = "text: person. Name"> </div>
<SCRIPT>
VaR viewmodel = kendo. observable ({
Person :{
Name: "John Doe"
}
});
Kendo. BIND ($ ("Div"), viewmodel );
</SCRIPT>

Note:


Do not bind this way,<div data-bind="text: person.name.toLowerCase()"></div>This is HTML, not JavaScript. To achieve this goal, please do this.

 

<Div data-bind = "text: person. lowercasename"> </div>

<SCRIPT>
VaR viewmodel = kendo. observable ({
Person :{
Name: "John Doe ",
Lowercasename: function (){
Return this. Get ("name"). tolowercase ();
}
}
});
Kendo. BIND ($ ("Div"), viewmodel );
</SCRIPT>