MVVM with Kendo UI

Editor's Notes

• #3: The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler. MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model). The view model of MVVM is a value converter[6] meaning that the view model is responsible for exposing the data objects from the model in such a way that those objects are easily managed and consumed. In this respect, the view model is more model than view, and handles most if not all of the view’s display logic (though the demarcation between what functions are handled by which layer is a subject of ongoing discussion[6] and exploration). The view model may also implement a mediator pattern organising access to the backend logic around the set of use cases supported by the view.
• #5: Kendo MVVM is an implementation of the MVVM pattern which seamlessly integrates with the rest of the Kendo framework (widgets and DataSource). The Model is defined as in MVC; it is the data or business logic, completely UI independent, that stores the state and does the processing of the problem domain.  The Model is written in code or is represented by pure data encoded in relational tables or XML.  The View is almost always defined declaratively, very often with a tool.  By the nature of these tools and declarative languages some view state that MVC encodes in its View classes is not easy to represent.  For example, the UI may have multiple modes of interaction such as "view mode" and "edit mode" that change the behavior of the controls or the look of the visuals.
• #6: The View in Model/View/ViewModel consists of the visual elements, the buttons, windows, graphics and more complex controls of a GUI. 
• #10: The ObservableArray wraps an existing Array object with change tracking capabilities.
• #16: The attr binding populates DOM element attributes from View-Model fields or methods. This is useful in many cases - setting the href and titleof a hyperlink, setting the src attribute of an image etc. If the View-Model field(s) change the attributes would be updated. The attr binding is set like this: attr: { attribute1: field1, attribute2: field2 } where attribute1 and attribute2 are the names of the attributes that would be set and field1 and field2 are the names of the View-Model fields to which those attributes would be bound. 
• #17: The source binding sets the HTML content of the target element by rendering a Kendo template with a View-Model value. If the View-Model value changes the HTML content of the target element will be updated. The template is specified by the data-template attribute of the element. The value of that attribute should be the value of the id of an existing script element which defines the Kendo template. If a template is not specified a default template will be used depending on element tag name.
• #18: The refresh handler is responsible for updating the HTML element. It will be executed each time when the value of the bound MVVM field changes. The bound DOM element and attached MVVM bindings could be retrieved through the context of the function. The change handler is responsible for updating the View-Model. It listens for the change event of the bound HTML input element. The View-Model is updated through the set(value) method of the binding.