Question

我是kendo ui mvvm的新手，面对以下问题：

方案我需要使用MVVM格式填充div中的几个字段，其中div的角色是listview。

数据来自dataSource，我收到一个不寻常的错误。我无法将数据源中的字段绑定到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示例并询问我在哪里被卡住了......

问题我该如何绑定dataSource中的字段？

我的最终动机是将div与dataSource中的值绑定。如果没有将其设置为listview，还有其他任何方法吗？

谢谢！

Hardik

Answer 1

你的JavaScript看起来不错。但是你的HTML有些问题。 data-role属性必须为"listview"。您不应该在listview div中放置4个跨度，而应该使用模板，并通过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);
});

Kendo UI：无法使用MVVM将数据绑定到列表视图

1 个答案: