Question

我是Knockout.js的新手。我试图执行以下代码来查看数据的网格视图。我从官方Knockout网站示例中获取了大部分代码。但谷歌控制台显示错误！输出是空白的。有什么建议吗？
数据数组作为pageGridModel（）中的参数传递。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>       
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML  4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-     8859-1">
        <title>Insert title here</title>
        <script type="text/javascript" src="knockout-3.4.0.js"></script>

    </head>
    <body>
    <div data-bind='simpleGrid: gridViewModel'>
    </div>
            <script type="text/javascript">
            var initialdata=[
                             {name:"aaaa1",price : 101,sales :110},  
                             {name:"aaaa2",price : 102,sales :210}, 
                             {name:"aaaa3",price : 103,sales :310}, 
                             {name:"aaaa4",price : 104,sales :410}, 
                             {name:"aaaa5",price : 105,sales :510}, 
                             {name:"aaaa6",price : 106,sales :610}, 
                             {name:"aaaa7",price : 107,sales :710}, 
                             ];
            var pageGridModel= function(items){
                   this.items=ko.observableArray(items);
                   this.addItem=function(){
                                              this.items.push({name:"aaaa1",price : 101,sales :110});
                                          };
                   this.sortItem=function(){
                                             this.items.sort();
                                          };
                   this.jumpToFirstPage=function(){
                                                 this.gridViewModel.currentPageIndex(0);
                                          };
                   this.gridViewModel =new ko.simpleGrid.viewModel({
                      data :this.items,
                      columns:[{headerText:"NAME"  ,rowText:"name"},
                               {headerText:"PRICE" ,rowText:"price"},
                               {headerText:"SALES" ,rowText:"sales"},
                              ],
                              pageSize:4
                  });                          
            };
            ko.applyBindings(new pageGridModel(initialdata));
            </script>

    </body>
</html>

Answer 1

您错过了head标记中的knockout.simpleGrid.1.3.js脚本引用。 simpleGrid是一个可选的插件，不包含在主KO库中。

这是在jsfiddle中工作。

<div data-bind='simpleGrid: gridViewModel'>
</div>

Knockout js网格视图未显示

1 个答案: