将绑定上下文设置为属性答案

【问题标题】：set binding context to a property将绑定上下文设置为属性
【发布时间】：2016-07-06 18:57:12
【问题描述】：

我希望能够通过绑定到属性来创建绑定上下文，就像with 绑定的工作方式一样：

<div data-bind="with: myData">
         <button data-bind="text: myHeader"></button>
</div>

但我不想使用with，因为每次myData 更改时，它都会重新创建HTML 元素（在我的示例中为button），请参阅http://knockoutjs.com/documentation/with-binding.html：

如果您提供的表达式涉及任何可观察的值，则每当这些可观察值中的任何一个时，都会重新评估表达式改变。然后，后代元素将被清除，并且一个新的副本的标记将被添加到您的文档并绑定在上下文中新的评价结果。

所以我需要类似于with 绑定的东西，比如说context 绑定：

<div data-bind="context: myData">
         <button data-bind="text: myHeader"></button>
</div>

<button> 现在绑定到myData 上下文，所以我不必写：

<div>
         <button data-bind="text: myData().myHeader"></button>
</div>

这也在 http://www.knockmeout.net/2012/03/knockoutjs-performance-gotcha-1ifwith.html

with 绑定对于绑定嵌套非常方便对象/模型，并有助于防止您的数据绑定属性变得过于冗长。然而，重要的是要了解 with binding 将在绑定时重新渲染整个部分值变化。

KO中是否存在类似的东西？

【问题讨论】：

标签： javascript knockout.js knockout-3.0

【解决方案1】：

我认为文档中的引用并不意味着您认为它的作用。

如果您在with绑定中使用的对象中有可观察对象，并且这些可观察对象发生了变化，则具有with绑定的元素的主体将不会无条件地重新渲染。

试试看。运行这个 sn-p 并在计数器递增时输入输入元素：

var vm = {
  sample: {
    counter: ko.observable(0)
  }
};

ko.applyBindings(vm);

setInterval(function () {
  vm.sample.counter( vm.sample.counter() + 1);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="with: sample">
  <input type="text" value="type here">
  <div>Counter: <span data-bind="text: counter"></span><div>
</div>

文档的含义：如果with 绑定指向一个可观察对象，并且那个可观察对象发生了变化，那么元素的主体将被重新渲染。

“如果您提供的表达式涉及任何可观察的值，” 指的是您提供给with 绑定的表达式。在您的情况下，该表达式是单个值myData。 myDatamyData 内部是否有任何可观察对象完全无关。

【讨论】：