【发布时间】：2013-04-12 10:46:26
【问题描述】：
我是 kendo ui mvvm 的新手，面临以下问题：
场景 我需要使用 MVVM 格式在角色为列表视图的 div 中填充几个字段。
数据来自数据源，我收到一个不寻常的错误。我无法将数据源中的字段绑定到 div。
以下是我的 JSBin 示例：http://jsbin.com/ajoyug/6/edit
HTML：
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript：
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
请帮帮我。我在网上看到很多示例，但是他们使用模板来绑定多个值，或者它们不适合我的要求。因此我想创建自己的 JSBin 示例并询问我在哪里卡住了...
问题 如何绑定数据源中的字段？
我的最终目的是将 div 与 dataSource 中的值绑定。如果不将其设置为列表视图，是否还有其他方法可以做到这一点？
谢谢！！
哈迪克
【问题讨论】：
标签： javascript mvvm kendo-ui