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

MVVM source binding to DataSource

7 Answers 688 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Luc
Top achievements
Rank 1
Luc asked on 17 Apr 2012, 01:01 AM
Hi,

I'm trying to bridge 2 samples from your demo library:

http://demos.kendoui.com/web/mvvm/source.html

and

http://demos.kendoui.com/web/mvvm/remote-binding.html

Basically, I want to use source binding on a template (as in the source and template binding sample), but instead of using static data I want to use a DataSource (as in the Remote binding sample).

So, following your code, I came up with this:
<ul id="list" data-template="ul-template" data-bind="source: theView"></ul>
   <script id="ul-template" type="text/x-kendo-template">
   <li>
       id: <span data-bind="text: ID"></span>
       name: <span data-bind="text: Name"></span>
   </li>
   </script>

var a = kendo.observable({
    theList: new kendo.data.DataSource({
        transport: {
            read: "/api/building"
        },
        change: function () {
            a.theView = this.view();
            kendo.bind($("#list"), a);
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: false
                    },
                    Name: {
                        editable: true,
                        nullable: true
                    }
                }
            }
        }
    }),
    theView: {}
});
 
var app = Sammy('#main', function () {
    // define a 'get' route that will be triggered at '#/path'
    this.get('#/path', function () {
        a.theList.read();
    });
 
    //default route, routes back to #/path
    this.get('', function () { this.app.runRoute('get', '#/path') });
 
});
 
$(document).ready(function () {
    //starts sammy
    app.run();
});

This will only work if I set the "source" binding on the template to "theView", but not if I set it to "theList", so this leads me to ask if I should be able to bind directly to a DataSource object with the source binding ?

In the Remote binding sample, you set the source binding of the select element directly to the modeview's DataSource, but this doesn't seem to work for list elements.

Am I doing something wrong, or maybe missing something ?

Thanks

7 Answers, 1 is accepted

Sort by
0
Luc
Top achievements
Rank 1
answered on 17 Apr 2012, 09:31 AM

I made my code as simple as possible to understand what's going on (note that I'm  using mockjax to simulate remote data):

<div id="container">
        Select Product:
        <select data-role="dropdownlist" data-value-field="ID" data-text-field="Name" data-bind="source: theList, value: selectedProduct">
        </select>
        <ul data-template="ul-template" data-bind="source: theView">
        </ul>
    </div>
    <script id="ul-template" type="text/x-kendo-template">
    <li>
        id: <span data-bind="text: ID"></span>
        name: <span data-bind="text: Name"></span>
    </li>
    </script>

 

var a = kendo.observable({
    theList: new kendo.data.DataSource({
        transport: {
            read: "/test/zaza",
            dataType: "json"
        },
        change: function () {
            var v = this.view();
            var arr = [];
            for (i = 0; i < v.length; i++) {
                arr.push(v[i]);
            }
            a.set("theView", arr);
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: false
                    },
                    Name: {
                        editable: true,
                        nullable: true
                    }
                }
            }
        }
    }),
    theView: []
});
 
$.mockjax({
    url: "/test/zaza",
    responseText: [{ "ID": 0, "Name": "Larocque" }, { "ID": 1, "Name": "St-Louis" }, { "ID": 2, "Name": "Dorval" }, { "ID": 3, "Name": "Zaza" }]
 
});
 
kendo.bind($("#container"), a);

This does what I want, but in the DataSource.change event handler, I must copy the elements from DataSource.view() to another Array or else it doesn't work.

This doesn't work:

var a = kendo.observable({
    theList: new kendo.data.DataSource({
        transport: {
            read: "/test/zaza",
            dataType: "json"
        },
        change: function () {
            var v = this.view();
            a.set("theView", v);
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: false
                    },
                    Name: {
                        editable: true,
                        nullable: true
                    }
                }
            }
        }
    }),
    theView: []
});
 
$.mockjax({
    url: "/test/zaza",
    responseText: [{ "ID": 0, "Name": "Larocque" }, { "ID": 1, "Name": "St-Louis" }, { "ID": 2, "Name": "Dorval" }, { "ID": 3, "Name": "Zaza" }]
 
});
 
kendo.bind($("#container"), a);

Also, I found that if I remove the select element from my html, then the DataSource never fetches the data, apparently because nothing is "pulling" on the DataSource.

So how would I "force" it to fetch data from the remote source when the <ul> element "pulls" on theView ?

Thanks

0
Luc
Top achievements
Rank 1
answered on 17 Apr 2012, 01:40 PM
Ok, I finally got it to work the way I want.

I simply had to set the data-role on the <ul> to "listview".
<div id="container">
       <ul data-role="listview" data-template="ul-template" data-bind="source: theList">
       </ul>
   </div>
   <script id="ul-template" type="text/x-kendo-template">
   <li>
       id: <span data-bind="text: ID"></span>
       name: <span data-bind="text: Name"></span>
   </li>
   </script>

var a = kendo.observable({
    theList: new kendo.data.DataSource({
        transport: {
            read: "/api/building",
            dataType: "json"
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: false
                    },
                    Name: {
                        editable: true,
                        nullable: true
                    }
                }
            }
        }
    }),
});
 
$.mockjax({
    url: "/test/zaza",
    responseText: [{ "ID": 0, "Name": "Larocque" }, { "ID": 1, "Name": "St-Louis" }, { "ID": 2, "Name": "Dorval" }, { "ID": 3, "Name": "St-Jacques" }]
 
});
 
kendo.bind($("#container"), a);

Everything now binds properly, and the DataSource automatically reads from the remote source.

0
Luc
Top achievements
Rank 1
answered on 17 Apr 2012, 05:27 PM
For anyone interested, here's a jsfiddle:

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/mrlucmorin/h27XH/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

EDIT: apprarently embeding jsfiddle doesn't work
0
Rhys
Top achievements
Rank 1
answered on 18 Apr 2012, 11:00 AM
hi i just tried your soln as this is what i have been trying to do for the last days.. i added a form post here.

if you have anyidea on why doing that same things you are does not work i would appricate hearing them.

Thank you

Rhys
0
Luc
Top achievements
Rank 1
answered on 18 Apr 2012, 12:14 PM
Hi Rhys,

From what I understand, your controller code is never called.

Have you looked at the request/response with a tool such as FireBug ? You need to figure out if the request is at least sent to your controller.

If you need more help on how to do this, let me know.

Cheers
0
Rhys
Top achievements
Rank 1
answered on 18 Apr 2012, 07:38 PM
yes I'm using firebug on fire fox to see if a call is made. at the time of binding, or afterwards, no calls are made. When i debug the JS and force the datasource to read (a.theList.read()) i get the following response:
[{"ID":0,"Name":"Larocque"},{"ID":1,"Name":"St-Louis"},{"ID":2,"Name":"Dorval"},{"ID":3,"Name":"St-Pierre"}]

(and the breakpoints on the controller hits)

but even doing this, nothing is showing in the list on screen using the data template other than the words
undefined

The scripts i am using for this are:
  • jQuery 1.7.2
  • kendo.web.min.js
  • kendo.data.min.js


0
Rhys
Top achievements
Rank 1
answered on 19 Apr 2012, 08:33 AM
hi,

It seems it was because of the js that i was using, i changed it to kendo.all.min and that fixed the problem.

thanks for your help
Tags
MVVM
Asked by
Luc
Top achievements
Rank 1
Answers by
Luc
Top achievements
Rank 1
Rhys
Top achievements
Rank 1
Share this question
or