淘汰赛 - 无法处理绑定，gridViewModel 未定义答案

【问题标题】：Knockout - Unable to process binding, gridViewModel is not defined淘汰赛 - 无法处理绑定，gridViewModel 未定义
【发布时间】：2015-11-21 17:10:08
【问题描述】：

我是淘汰赛的新手，我不知道为什么会收到此消息。

无法处理绑定“simpleGrid: function (){return gridViewModel }” 消息：gridViewModel 未定义；

library_customization.js

define(['services/logger'], function (logger) {
var title = 'Library Customization';
var vm = {
    activate: activate,
    title: title
};

return vm;


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));

function activate() {
    logger.log(title + ' selected', null, title, true);
    return true;
}

});

library_customization.html

  <!DOCTYPE html>
    <html id="libraryCust">
    <head>

    <title> Project</title>

    <script type="text/javascript" src="../../Scripts/knockout-3.3.0.js
    </script>

    </head>
    <body>
    <section>
        <h2 class="page-title" data-bind="text: title"></h2>
    </section>


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

    </body>
    </html>

【问题讨论】：

标签： javascript html knockout.js data-binding

【解决方案1】：

检查小提琴：JS Fiddle

我认为主要问题是您在下面的代码中比计划更早地退出了模块：

var title = 'Library Customization';
var vm = {
    activate: activate,
    title: title
};

return vm;

/* your main code follows below but never executes */

所以我将这些属性移到 PagedGridModel 构造函数中。

【讨论】：

感谢您的回答。当我在我的项目中写这样的东西时，我仍然收到此错误消息：未捕获错误：无法加载路由模块（viewmodels/library_customization）。详细信息：您不能对同一个元素多次应用绑定。您能告诉我原因，或者至少我应该在哪里查找错误吗？
@kata 您显然有多次致电ko.applyBindings。这通常是个坏主意，但如果您要这样做，则需要通过传递第二个参数来限制对 DOM 元素的每次调用。
如果您需要多个 ko 模型同时工作，您必须指定要绑定到的元素，例如：ko.applyBindings( yourViewModel, document.getElementById( elementId ) )。或者，如果您有一个视图模型，如 Roy 所说，您可能多次在同一元素或整个文档上调用 ko.applyBindings。检查您拨打ko.applyBindings 的位置，确保它们没有重叠。
感谢您的回答，现在一切正常。:)