Question

我从jsfiddle.net（http://jsfiddle.net/rniemeyer/QSRBR/）中获取了Paged网格的示例，并将其放入一个* .html文件中但它不起作用 - 我在浏览器控制台中出错：

Uncaught TypeError: Cannot read property 'viewModel' of undefined
    at new PagedGridModel (knockout pagination.html:72)
    at knockout pagination.html:83

这是html文件内容：

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<style>
    body { font-family: arial; font-size: 14px; }
    .liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
    .liveExample input { font-family: Arial; }
    .liveExample b { font-weight: bold; }
    .liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
    .liveExample select[multiple] { width: 100%; height: 8em; }
    .liveExample h2 { margin-top: 0.4em; }
    .ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
    .ko-grid th { text-align:left; background-color: Black; color:White; }
    .ko-grid td, th { padding: 0.4em; }
    .ko-grid tr:nth-child(odd) { background-color: #DDD; }
    .ko-grid-pageLinks { margin-bottom: 1em; }
    .ko-grid-pageLinks a { padding: 0.5em; }
    .ko-grid-pageLinks a.selected { background-color: Black; color: White; }
    .liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */
    li { list-style-type: disc; margin-left: 20px; }
</style>

</head>

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

    <script type="text/javascript">
        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.addItem = function() {
                this.items.push({ name: "New item", sales: 0, price: 100 });
            };

            this.sortByName = function() {
                this.items.sort(function(a, b) {
                    return a.name < b.name ? -1 : 1;
                });
            };

            this.jumpToFirstPage = function() {
                this.gridViewModel.currentPageIndex(0);
            };

            this.gridViewModel = new ko.simpleGrid.viewModel({
                data: this.items,
                columns: [
                    { headerText: "Item Name", rowText: "name" },
                    { headerText: "Sales Count", rowText: "sales" },
                    { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
                ],
                pageSize: 4
            });
        };

        ko.applyBindings(new PagedGridModel(initialData));
    </script>
</body>
</html>

这段代码在jsfiddle上运行正常，但是当我把它们放在一个文件中时为什么不能正常工作呢？

为什么这个代码没有用knockout.js来解决jsfiddle？

0 个答案: