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:
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
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
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".
Everything now binds properly, and the DataSource automatically reads from the remote source.
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
<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
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
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
undefinedThe 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
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