Javascript 剑道UI:无法使用MVVM将数据绑定到列表视图_Javascript_Mvvm_Kendo Ui

Javascript 剑道UI:无法使用MVVM将数据绑定到列表视图

javascript mvvm kendo-ui

Javascript 剑道UI:无法使用MVVM将数据绑定到列表视图,javascript,mvvm,kendo-ui,Javascript,Mvvm,Kendo Ui,我是剑道ui mvvm新手，面临以下问题：场景我需要使用MVVM格式填充角色为listview的div中的几个字段数据来自数据源，我得到一个不寻常的错误。我无法将数据源中的字段绑定到div 以下是我的JSBin示例： HTML: <!DOCTYPE html> <html> <head> <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" re

我是剑道ui mvvm新手，面临以下问题：

场景我需要使用MVVM格式填充角色为listview的div中的几个字段

数据来自数据源，我得到一个不寻常的错误。我无法将数据源中的字段绑定到div

以下是我的JSBin示例：

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>

$(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);
});

<!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>

$(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);
});

请帮帮我。我在网上看到了很多样本，但他们使用模板绑定了多个值，或者它们不符合我的要求。因此我考虑创建自己的JSBin样本，并询问我在哪里卡住了

问题如何从数据源绑定字段

我的最终目的是将div与数据源中的值绑定。如果不将其设置为listview，是否还有其他方法可以做到这一点

谢谢

Hardik

您的JavaScript看起来不错。不过，您的HTML有一些问题。

数据角色

属性必须是

“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>
<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>

$(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);
});

<!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>

$(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);
});

嗨，丹！！非常感谢您的回复！！成功了……）我只是想听听你的意见。。我目前是剑道UI MVVM的新手，我面临着许多小问题，我每天大部分时间都在谷歌上搜索。。你能给我推荐我应该学习的链接吗？或者任何博客？我有时可以找到一个非MVVM的解决方案，但实际上无法实现MVVM的方式。。。再次感谢您的反馈！！我刚刚熟悉了他们的文档网站。那里有很多数据，甚至你必须在不同的地方搜索。在文档和演示之间，大部分都在那里。