MVVM with Kendo UI
•Als PPTX, PDF herunterladen•
0 gefällt mir•1,246 views
How to use MVVM with Kendo UI
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie MVVM with Kendo UI
Ähnlich wie MVVM with Kendo UI (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
MVVM with Kendo UI
- 1. MVVM with Kendo UI BRUNO PESSANHA
- 2. MVVM BRUNO PESSANHA – MVVM WITH KENDO UI
- 3. MVVM BRUNO PESSANHA – MVVM WITH KENDO UI Advantages Disadvantages Facilitates easier parallel development of a UI and the building blocks that power it For simpler UIs, MVVM can be overkill. Abstracts the View and thus reduces the quantity of business logic (or glue) required in the code behind it. Whilst data-bindings can be declarative and nice to work with, they can be harder to debug than imperative code where we simply set breakpoints. The ViewModel can be easier to unit test than event-driven code. Data-bindings in non-trivial applications can create a lot of book-keeping. You also don’t want to end up in a situation where bindings are heavier than the objects being bound to. The ViewModel (being more Model than View) can be tested without concerns of UI automation and interaction. In larger applications, it can be more difficult to design the ViewModel up front to get the necessary amount of generalisation.
- 4. Kendo MVVM – Model BRUNO PESSANHA – MVVM WITH KENDO UI Data; UI Independent; State; Written in code; Represented by pure data.
- 5. Kendo MVVM – View BRUNO PESSANHA – MVVM WITH KENDO UI
- 6. Kendo MVVM – View-Model BRUNO PESSANHA – MVVM WITH KENDO UI
- 7. Kendo MVVM – Binding View to View-Model BRUNO PESSANHA – MVVM WITH KENDO UI
- 8. Kendo MVVM – Binding View to View-Model BRUNO PESSANHA – MVVM WITH KENDO UI
- 9. Kendo MVVM – Observable Array BRUNO PESSANHA – MVVM WITH KENDO UI
- 10. Kendo MVVM – Getting a field value BRUNO PESSANHA – MVVM WITH KENDO UI
- 11. Kendo MVVM – Getting a field value BRUNO PESSANHA – MVVM WITH KENDO UI
- 12. Kendo MVVM – Setting a field value BRUNO PESSANHA – MVVM WITH KENDO UI
- 13. Kendo MVVM – Calculated field BRUNO PESSANHA – MVVM WITH KENDO UI
- 14. Kendo MVVM – Bindings Attr Checked Click Custom Disabled Enabled Events HTML Invisible Source Style Text Value Visible BRUNO PESSANHA – MVVM WITH KENDO UI
- 15. Kendo MVVM – Bindings – Attr BRUNO PESSANHA – MVVM WITH KENDO UI
- 16. Kendo MVVM – Bindings – Source BRUNO PESSANHA – MVVM WITH KENDO UI
- 17. Kendo MVVM – Bindings – Custom BRUNO PESSANHA – MVVM WITH KENDO UI
- 18. References http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx http://msdn.microsoft.com/en-us/magazine/dd419663.aspx http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/overview http://demos.telerik.com/kendo-ui/mvvm/index http://en.wikipedia.org/wiki/Model_View_ViewModel http://blogs.msdn.com/b/johngossman/archive/2006/03/04/543695.aspx BRUNO PESSANHA – MVVM WITH KENDO UI
Hinweis der Redaktion
- 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.
- 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.
- The View in Model/View/ViewModel consists of the visual elements, the buttons, windows, graphics and more complex controls of a GUI.
- The ObservableArray wraps an existing Array object with change tracking capabilities.
- 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.
- 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.
- 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.