kendo listView declaritive
Declare listView via html element, template uses data-bind elements and works. Declare listView via constructor, template uses data-bind elements and DOES NOT work posted to kendo forum: http://www.kendoui.com/forums/framework/mvvm/declarative-vs-constructor-and-template-data-bind-elements.aspx#2204210
by jwstott
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<strong>Declarative listView</strong>
<div id="listView_D"
data-role="listview"
data-selectable="true"
data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }"
data-template="template">
</div>
<hr/>
<strong>Constructor listView</strong>
<div id="listView_C" ></div>
<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>
JavaScript
var viewModel = kendo.observable({
test: "text to bind",
onChange: function(e) {
console.log('change');
},
onMouseDown: function(e) {
console.log('onMouseDown');
e.stopPropagation();
},
listSource: [
{
Id: 1,
FirstName: "Bob",
LastName: "Smith"},
{
Id: 2,
FirstName: "Frank",
LastName: "Jones"},
{
Id: 3,
FirstName: "Joe",
LastName: "Blow"}
],
LastName: "foo" //jsut in case
});
//kendo.init($('#listview_D'));
$('#listView_C').kendoListView({
selectable: true,
template: kendo.template($("#template").html()),
change: viewModel.onChange,
mousedown: viewModel.onMouseDown,
dataSource: {
data: viewModel.listSource,
pageSize: 10
}
});
kendo.bind(document.body.children, viewModel);