Knockout.js 如何访问绑定到敲除中其他元素的ViewModel？

我遇到的情况是，我有一个组件需要访问另一个组件的模型并设置一个标志

因此，类似于此：

<div id='component1'>
    <div data-bind='visible: showMe()'>Shown</div>
</div>

<div id='component2'>
    <button data-bind='click: setFlag()'>Set the flag</button>
</div>

---

基于您的代码，我假设

#component1

是依赖于

#component2

的局部视图。但是，由于它不是直接嵌入到

#组件1

中，因此必须有一个共同的容器来容纳这两个组件。这个公共容器应该被认为是这两个组件的主机

一般来说，您应该始终将UI中逻辑上相关的部分包装在一个公共容器中，并为该容器定义一个viewmodel，该容器除了保存单个部分或组件的viewmodels之外不做任何其他事情，不管您喜欢什么，可能还有一些协调逻辑，比如定义什么是可见的，什么时候是可见的，就像你的问题一样

因此，我将按照以下方式进行：

function component1ViewModel() {

};

function component2ViewModel() {

};

function mainViewModel() {
    var self = this;        

    // Doesn't have to be observable if the value is never changed        
    this.component1VM = ko.observable(new component1ViewModel());
    this.component2VM = ko.observable(new component2ViewModel());

    this.component1Visible = ko.observable(false);
    this.setComponent1Visible = function(visible) {
        self.component1Visible(visible);
    };
};

然后在标记中：

<div id="main">
  <div id="component1" data-bind="with: component1VM, visible: $parent.component1Visible()">
    Yay I'm visible!
  </div>

  <div id="component2" data-bind="with: component2VM">
    <button type="button" data-bind="click: $parent.setComponent1Visible.bind($data, true)">
      Show component 1
    </button>
  </div>
</div>

总之，通过将两个相互依赖的viewmodel包装在一个公共容器中，您可以使用标记中提供的

$parent

元素knockout，并使用该引用，您可以调用viewmodel层次结构中上层对象中的函数

---

但是，我想指出的是，使用这种方法，如果需要，可以通过添加适当的导航：

$parent.component1.someFunction.bind（$data，val1，val2）

直接调用

component1

。因此，事实上，您并不局限于在公共父级中定义可见性相关的内容，您可以使用您更喜欢的方法并找到更具可读性的方法。

这篇博客文章在处理多视图模型场景方面有一些有趣的选择：您可以使用此设置在公共范围内贴花

showMe

<div id="main">
  <div id="component1" data-bind="with: component1VM, visible: $parent.component1Visible()">
    Yay I'm visible!
  </div>

  <div id="component2" data-bind="with: component2VM">
    <button type="button" data-bind="click: $parent.setComponent1Visible.bind($data, true)">
      Show component 1
    </button>
  </div>
</div>

$(function() {
  ko.applyBindings(new mainViewModel(), $('#main')[0]);
});