Question

我有两个视图模型

1. vm1 (for page1.php)
2. vm2 (for page2.php)

，它们位于单独的js文件中。 vm1绑定如下： VM1.js

$(function() {
    //other stuff
    // see orders is defined here
    gs.vm1 = function(){
            var orders = ko.observableArray([]);
        }();
    ko.applyBindings(gs.vm1, document.getElementById('page1_id'));
);

vm2绑定到这样的对话框： VM2.JS

$(function(){
    //other stuff
    // orders is NOT defined here
    gs.vm2 = function(){...}();
    ko.applyBindings(gs.vm2, document.getElementById('page2_id'));
});

如您所见，正如我在kojs网站上提到的，https://knockoutjs.com/documentation/observables.html

当我加载应该绑定vm1的page1.php时，出现此错误：

Uncaught ReferenceError: Unable to process binding "foreach: function(){return orders }"
Message: orders is not defined

这是page1.php中我正在使用foreach的模板代码：

<div id="page1_id">
    <div data-bind="foreach: orders">
        <input class="form-check-input" type="checkbox">
        <span data-bind="text: ...some observable..."></span>
    </div>
</div>

可以看到

订单在vm1中被定义为observableArray，但是由于某种原因，ko正在vm2中查找它。我调试了 ko代码，似乎上下文设置为vm2。

我的head标签看起来像这样（只是为了展示我如何包含这些脚本文件）：

<script src="scripts/vm1.js" type="text/javascript"></script>
<script src="scripts/vm2.js" type="text/javascript"></script>

我正在使用一种模块展示模式，该模式可以展示我要展示的var，而订单就是其中之一。

Answer 1

我发现了问题，并将在任何人犯与我相同的错误时发布答案。正如我在问题中所说的那样，vm1是用于对话框的，提供给该对话框的id是page1_id。我在page2上没有该对话框，当ko应用绑定时，找不到该id并将null传递给

ko.applyBindings = function (viewModelOrBindingContext, rootNode) {...}

作为第二个参数。如果您查看ko代码，则这是设置节点的方式：

rootNode = rootNode || window.document.body;

因此，如果您传递null，则主体基本上就是您的上下文，并且由于未定义订单，因此会出现错误。

所以我想这课是（至少对我来说），以确保您在绑定中是否明确指出它们在所需页面上的定义正确。

Knockoutjs虚拟机未绑定到正确的元素

1 个答案: