Knockoutjs vm 未绑定到正确的元素

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

当我加载 page1.php 时，vm1 应该是有界的，我得到这个错误：

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>

我正在使用一个模块显示模式，它公开了我想公开的变量，订单就是其中之一。

Answer 1

我发现了这个问题，并将 post 给出答案，以防有人犯与我相同的错误。正如我在我的问题中所说，vm1 是一个对话框，给予该对话框的 id 是 page1_id。我在 page2 上没有那个对话框，当 ko 应用绑定时它找不到那个 id 并将 null 传递给

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

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

rootNode = rootNode || window.document.body;

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

所以我想教训是（至少对我而言）确保您在绑定中明确说明它们已在所需页面上正确定义。

Knockoutjs vm 未绑定到正确的元素

Knockoutjs vm not binding to correct element

javascript

observable

knockout.js