In my web application I am using Kedno UI Controls for implementing front-end side controls and user interaction. Most of the web application code is written in java-script, so the general approach is to go client side.
On the Kendo UI demo website, we have 2 approaches for initializing kendo grid in case of using MVVM pattern and bindings (as a sample control, but this should apply to other controls):
1/ Data attribute initialization - part of example for brevity
Full example: http://demos.telerik.com/kendo-ui/grid/mvvm
2/ Custom binding (angular way) - part of example for brevity
In the binding for the grid, we pass all required options for particular control. Full similar angular example: http://demos.telerik.com/kendo-ui/grid/angular
Concerning information above I have these questions:
- Which approach is better and why (pron and cons) - to use data attributes for settings or to keep all the control settings in the view model in js and bind it easy to the control like angular does? Taking into account long term application development - support of tools and frameworks (i.e. Typescript), complex settings for controls
- Is this bad idea or breaks MVVM pattern in anyway, that view model contains kendo object after it was initialized, so view model knows what is the control behind it? Of course not in every case, but in the situation when we need to do some workaround on our kendo control in js. In this case we don't need to use jquery selector to get control's data, because binding will give us a reference to the kendo control in the view model after its initialization.
This approach was implemented in Kendo Binding for Angular http://www.telerik.com/blogs/a-few-angular-kendo-ui-best-practices -> Leverage Widget References.
Thank you all for the feedback and answers.