knockout.js - 使用 "with"设置上下文时 knockout $parent 的疑问

Question

我有这样的 3 级嵌套模型

WebsiteViewModel => MenuViewModel => MenuEntryViewModel

WebsiteViewModel是根模型。现在在用于 MenuEntryViewModel 的 html 模板中我将绑定(bind)上下文设置为 MenuEntryViewModel 使用 "with" 如下所示

<div id="contextSetter" data-bind="with: menuViewModel.menuEntryViewModel">
    <div data-bind="event: {'hidden.bs.modal': function() {console.log($parent);}}">
    ...
    </div>
</div

上面的事件绑定(bind)出人意料地记录了 网站查看型号 对象而不是 MenuViewModel

因此，如果当前绑定(bind)上下文是 menuViewModel.menuEntryViewModel 那么 $parent 不指向 menuViewModel , 它指向 网站查看型号 (本例中的根模型)。尽管我可以为此使用解决方法，但我认为 $parent 应该指向 MenuViewModel .对此行为有何评论？

Answer 1

这是设计使然，因为您正在链接 with: menuViewModel.menuEntryViewModel一起，这两个项目的父上下文是 WebsiteViewModel .

检查@Jeroen 发布的这些示例:

Your Nested Structure

在此示例中，menuViewModel.menuEntryViewModel 的链接, 表示上下文被视为单个上下文，其中 $parent是 WebsiteViewModel .

标记

<div id="contextSetter" data-bind="with: menuViewModel.menuEntryViewModel">
    <div data-bind="click: function() {console.log($parent);}">
        click me to see console.log
    </div>
</div>

JS

var websiteViewModel  = {
    txt: 'website',
    menuViewModel: {
        txt: 'menu',
        menuEntryViewModel: {
            txt: 'entry'
        }
    }
};

ko.applyBindings(websiteViewModel);

在本例中，您可以将其修改为 console.log($parent.menuViewModel) ，如果您需要访问它的属性，它将导航到您期望的 View 模型。

Modified Structure

在此示例中，没有链接，上下文是单个项目和 $parent按预期进行评估。

标记

<div id="contextSetter" data-bind="with: menuViewModel">
    <div data-bind="click: function() {console.log($parent);}">
        top-click-me to see console.log
    </div>
    <div id="subContextSetter" data-bind="with: menuEntryViewModel">
        <div data-bind="click: function() {console.log($parent);}">
            click me to see console.log
        </div>
    </div>
</div>

JS

var websiteViewModel  = {
    txt: 'website',
    menuViewModel: {
        txt: 'menu',
        menuEntryViewModel: {
            txt: 'entry'
        }
    }
};

ko.applyBindings(websiteViewModel);