javascript - 将 DOM 元素属性直接绑定(bind)到其他元素

Question

有没有办法像 WPF 一样在 javascript 中应用数据绑定(bind)？在哪里可以直接绑定(bind)到另一个元素，而不需要像 knockout 那样构建 View 模型？

为了阐明我想做什么，我想隐藏一个 DOM 元素，基于 select 中的选定选项，并且仅具有数据属性，无需编写 JavaScript 代码。

Answer 1

您可以将 KO 用于任意的、不可观察的数据，但它将是一种单向绑定(bind)，如果数据更改则不会更新。示例:

var obj = {
  items: [
    "one",
    "two",
    "three"
  ]
};
ko.applyBindings(obj, document.body);
setTimeout(function() {
  obj.items.push("four"); // Doesn't appear when this runs
}, 1000);

<div data-bind="foreach: items">
  <div data-bind="text: $data"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

原因很简单:KO无法知道变化的值，这就是observables的意义所在。

因为当你想要那种行为时，KO 本身可能有点矫枉过正，但是当你既想要那种行为又想要成熟的 KO 行为时，Ryan N 的 interpolate插件可能会有用。

KO 并不是城里唯一的游戏。例如，RivetsJS 使用 ES5 的属性拥有 getter 和 setter 的能力，并动态重写您的对象以添加它们(将简单的 foo 属性转换为带有 getter 的 foo 属性和二传手)。 (我不是建议使用它，我也没有在实际项目中使用过它，只是指出还有其他选择。)AngularJS，当然，使用检查更改模型，但也更显着投资比像 KO 或 RivetsJS 这样的简单库。

Looks good, what I need is, to hide and show a DOM element based on the choosen element in a select. I already thought about building something myself but that might be over the top.

这将是 KO 本身的一个用例:

ko.applyBindings({
  selectValue: ko.observable("1")
}, document.body);

<select data-bind="value: selectValue">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>
<span data-bind="visible: +selectValue() % 2 == 1">Odd</span>
<span data-bind="visible: +selectValue() % 2 == 0">Even</span>
value
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

现在，我通常会避免将 tcomputation 放在 data-bind 中(我会使用计算)，但我想证明在模型中是最小的.