MVC4中带有ko的示例网格

Question

我是MVC4和Knockout的新手。我从一个网格开始。所以我已经从这个URL复制了所有内容：http://knockoutjs.com/examples/grid.html

这是我的js文件。

      $(document).ready(function () {
         ko.applyBindings(new PagedGridModel(initialData));
      });
    var initialData = [
       { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
        { name: "Speedy Coyote", sales: 89, price: 190.00 },
       { name: "Furious Lizard", sales: 152, price: 25.00 },
       { name: "Indifferent Monkey", sales: 1, price: 99.95 },
       { name: "Brooding Dragon", sales: 0, price: 6350 },
       { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
       { name: "Optimistic Snail", sales: 420, price: 1.50 }
      ];
var PagedGridModel = function (items) {
    this.items = ko.observableArray(items);
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowText: "name" }
            ],
        pageSize: 4
    });
};

这是我的cshtml

    <link href="../../Content/list/list.css" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript">     </script>
   <script src="../../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
   <script src="../../Scripts/list/list.js" type="text/javascript"></script>
  <div class='liveExample'> 

<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addItem'>
    Add item
</button>
<button data-bind='click: sortByName'>
    Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>
</div>​

"ko.simpleGrid"未定义，因此据说*无法读取undind*的属性"viewModel"。原因可能是什么？

谢谢你的帮助。

Answer 1

我想您忘了包含包含插件实现的knockout.simpleGrid.1.3.js脚本。您可以在敲除简单网格fiddle沙箱中查看示例。

Answer 2

您应该在页面底部调用applyBindings方法：

<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addItem'>
    Add item
</button>
<button data-bind='click: sortByName'>
    Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>
<script type="text/javascript">
     $(document).ready(function () {
         ko.applyBindings(new PagedGridModel(initialData));
      });
</script>

或者在页面底部引用您的脚本。