Knockout JS 将视图模型绑定到多个分布式元素 ID答案

【问题标题】：Knockout JS bind view model to multiple distributed element IDsKnockout JS 将视图模型绑定到多个分布式元素 ID
【发布时间】：2019-06-11 15:45:27
【问题描述】：

这与我的问题相似，但似乎解决方案是创建一个附近的共同父级。就共性而言，我能做到的唯一方法是绑定到document 或类似的东西，但这违背了目的：

Can I applyBindings to more than one DOM element using Knockout?

是否建议像这样将单个视图模型实例绑定到多个 ID。我试过了，它适用于简单的情况：

ko.applyBindings(newVm, document.getElementById('grapes'));
ko.applyBindings(newVm, document.getElementById('apples'));

我这样做的原因是我想使用内置功能绑定到单页应用程序上的特定元素，但这些元素没有共同的父元素。

应用绑定时，是否会创建任何会导致占用内存的视图模型实例副本？

这不是关于单个页面视图的多个视图模型，也不是关于同一元素的多个视图模型。一个示例用例是 serverConnection 视图模型，其中连接和断开按钮位于工具栏的顶部，而连接状态位于状态栏的底部。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

是否建议将单个视图模型实例绑定到多个ID

不，不推荐。但也不一定错……

推荐的方法是使用with 绑定。例如：

JS

const serverConnection = new ServerConnection();
const app = new App();

ko.applyBindings({ app, serverConnection });

HTML

<body>
  <header data-bind="with: serverConnection">
    <button data-bind="click: connect">Connect</button>
    <button data-bind="click: disconnect">Disconnect</button>
  </header>

  <article data-bind="with: app">
    ...
  </article>

  <footer data-bind="with: serverConnection">
    <div data-bind="text: statusCode"></div>
  </footer>
</body>

可运行的 sn-p

const serverConnection = new ServerConnection();
const app = new App(serverConnection);

ko.applyBindings({ app, serverConnection });


function App(connection) {
  this.user = connection.user;
  
  this.heading = ko.pureComputed(
    () => this.user() ? `Welcome, ${this.user()}` : `Connect to get started...`
  );
}

function ServerConnection() {
  this.connected = ko.observable(false);
  this.connecting = ko.observable(false);
  this.user = ko.observable(null);
  
  this.connect = () => {
    this.connecting(true);
    setTimeout(
      () => {
        this.connected(true);
        this.user("Jane Doe");
        this.connecting(false);
      },
      1500
    )
  };
  
  this.disconnect = () => {
    this.user(null);
    this.connected(false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<header data-bind="with: serverConnection">
  <button data-bind="click: connect, disable: connecting">Connect</button>
  <button data-bind="click: disconnect, disable: connecting">Disconnect</button>
</header>

<article data-bind="with: app">
  <h2 data-bind="text: heading"></h2>
</article>

<footer data-bind="with: serverConnection">
  <div data-bind="text: connected() ? '✅' : '?'"></div>
</footer>

【讨论】：

感谢您的示例。所以with 绑定范围从全局级别开始，我想您可以嵌套它们以获得更具体的信息？我想这就是我一直在寻找的东西。
没错！您可以在the docs 了解更多信息