Declarative vs Constructor and template data-bind elements

[jstott]

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 

[Nikolay Rusev]

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 DOM) kendo.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

[jstott]

Nikolay, 

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

Jim

[Joshua]

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.

[Craig]

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.

[Atanas Korchev]

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