2

我是 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 中的值绑定。如果不将其设置为列表视图，是否还有其他方法可以做到这一点？

谢谢！！

哈迪克

4

1 回答 1

3

你的 JavaScript 看起来不错。不过，您的 HTML 存在一些问题。属性data-role必须是. "listview"而不是在您的 listview 中放置 4 个跨度div，您应该真正使用模板，并通过 ID 引用它。

同样重要的是要注意您的模板必须有一个根元素，因为 kendo 只对模板中的第一个元素执行绑定。

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>
<script id="tmp" type="text/x-kendo-template">
  <div>
    <span data-bind="text:prodName"></span><br/>
    <span data-bind="text:qty"></span><br/>
    <span data-bind="text:total"></span><br/>
    <span data-bind="text:price"></span>
  </div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div
    id="myListView"
    data-role="listview"
    data-bind="source: dataSource"
    data-template="tmp">
  </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}
        }
      }
    }
  });

  var listViewModel = kendo.observable({
    dataSource:dataSource
  });
  kendo.bind($("#myListView"), listViewModel);
});
于 2013-04-19T06:05:47.040 回答