2

私は剣道UI mvvmが初めてで、次の問題に直面しています:

シナリオ MVVM 形式を使用して、ロールがリストビューである div にいくつかのフィールドを入力する必要があります。

データは 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の値にバインドすることです..リストビューとして設定しない場合、それを行う他の方法はありますか?

ありがとう！！

ハーディク

4

1 に答える 1