This is a migrated thread and some comments may be shown as answers.

Declarative vs Constructor and template data-bind elements

5 Answers 624 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
jstott
Top achievements
Rank 1
jstott asked on 26 Jul 2012, 06:29 PM
As I understand, there are two (equal ?) ways to declare widget initialization: constructor and data attributes.  However, I am seeing two different behaviors (in regard to templates specifically) depending on how I initialized say the ListView widget.

Constructor:
$('#listView_C').kendoListView({
    selectable: true,
    template: kendo.template($("#template").html()),
    change: viewModel.onChange,
    mousedown: viewModel.onMouseDown,
    dataSource: {
        data: viewModel.listSource,
        pageSize: 10
    }
});

vs. Declarative:
<div id="listView_D" data-role="listview" data-selectable="true" data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }" data-template="template"></div>

See my jsFiddle it shows both flavors of ListView's above: 
The listview via constructor renders the LastName as undefined from the template span data-bind? 

<script type="text/x-kendo-tmpl" id="template">
    <div class="customers">
        <dl>
            <dt>First Name</dt>
            <dd>#=FirstName#</span></dd>
            <dt>Last Name</dt>
            <dd><span data-bind="text: LastName" ></span></dd>
         </dl>
   </div>
</script>

I think this is related, as the demo for editing a listview uses two templates (display and edit) and constructor initialization.  The edit template does use data-bind elements, but it only works while in edit mode?.  If you try the same on the display template, that does not work - not sure what or why the difference is to the control or data?
<!-- editTemplate works -->
<dd>
    <input type="text" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
    <span data-for="ProductName" class="k-invalid-msg"/>
</dd>
 
<!-- template - works -->
<dd>${ProductName}</dd>
 
<!-- template - change to data-bind does not work -->
<input type="text" data-bind="value:ProductName" name="ProductName" />

Thanks for any insight!
Jim 

5 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 31 Jul 2012, 10:57 AM
Hello Jim,

First I should explain what is the difference between both expressions #=field# and data-bind="text: field".

The #=field# is a template expression which will be evaluated by kendo.template, while data-bind="text: field" attribute is a binding expression which will be picked up by Kendo MVVM(i.e when you call kendo.bind).

This type of binding expression is used for edit templates as this will generate two-way binding between ui and the model. Internally ListView widget will call kendo.bind to already rendered template(set via editTemplate). As a Model will use the actual data for the item extracted from the corresponding DataSource instance.


Now the what is the difference between the "declarative initialization" and "initialization via constructor"?
 - In declarative initialization for every ListView item(which is already processed by kendo.template and appended to the DOMkendo.bind is called and the model is the corresponding item from the listSource(the actual data source).
 - In initialization with contractor the ListView is bound to it's data source, all items are processed by kendo.template and appended to the DOM and at the end kendo.bind(document.body.children, viewModel);‚Äč is called. Now what happens here is next - for all elements in document.body.children find binding expressions and bind the elements with those expressions to the model instance viewModel. Thus when ListView item with binding expression is found it is bound to viewModel which does not contains field LastName.

In case you need to bind LastName in that example you should add that field to viewModel: http://jsfiddle.net/Fxyzb/

Here are some articles that explains how Kendo MVVM works that might be of help:
http://docs.kendoui.com/getting-started/framework/mvvm/overview
http://docs.kendoui.com/howto/declarative_initialization

I hope this make things look more clearer for you now.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jstott
Top achievements
Rank 1
answered on 31 Jul 2012, 01:35 PM
Nikolay, 

Excellent explanation, I can see exactly where I was missing / confusing the pieces.  Makes total sense.
Thank you!

Jim
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 16 Aug 2012, 11:16 PM
I have gone through all of the examples in this thread and i have been coding and uncoding, because i am trying to use declaritive binding for items in a template. I have it working for items that bind to data, but not for items that bind to events. I think this is because the data model does not contain an event to bind to, but i am not so sure how i would get one there.

I have included a fiddle that shows an example:
http://jsfiddle.net/grippstick/XmCgX/ 

It should also be noted that the fiddle includes the best thing i could come up with an auto complete that places the results in a list view. I would use a normal auto complete, but i do not want the drop down and i do not know of a good way to bind away the animation property. In any event it would normally be calling a service, but for this example i just made it use local data.

If you notice all of the click me buttons just throw out an exception.
0
Craig
Top achievements
Rank 1
answered on 19 Feb 2013, 06:40 PM
I'm having the same issue as Joshua.  Is there a way to bind to the event he laid out in this example?
http://jsfiddle.net/grippstick/XmCgX/ 

Thanks.

0
Atanas Korchev
Telerik team
answered on 20 Feb 2013, 08:51 AM
Hi,

 The problems is caused because the returned data source is not a child of the parent view model which contains the event handler function. Here is a working implementation: http://jsfiddle.net/XmCgX/25/

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
jstott
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
jstott
Top achievements
Rank 1
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Craig
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or