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”正在变得如此明确它说* 无法读取undefind * 的属性'viewModel'。可能是什么原因？

感谢您的帮助。

Answer 1

我认为您忘记包含包含插件实现的knockout.simpleGrid.1.3.js脚本。您可以在knockout simple grid fiddle sandbox中查看示例。

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>

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

在MVC4中使用ko示例网格

2 个答案: