Question

有没有办法在javascript中应用类似WPF的数据绑定？你可以直接绑定到另一个元素，而不需要像在knockout中那样构建一个viewmodel？

为了澄清我想做什么，我希望隐藏一个DOM元素，基于select中的选定选项，只需要数据属性，不需要编写JavaScript代码。

Answer 1

您可以将KO与任意，不可观察的数据一起使用，但它将是一种单向绑定，如果数据发生更改，则不会更新。例如：

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无法知道值的变化，这是可观察的点。

因为当你想要这种行为时，KO本身可能会有些过分，但是当你想要这样做以及完整的KO行为时，Ryan N的interpolate插件可能会有用。

KO不是镇上唯一的游戏。例如，RivetsJS使用ES5的属性来获取getter和setter，并动态重写你的对象以添加它们（将一个简单的foo属性转换为带有getter和setter的foo属性）。（我不是建议使用它，我没有在真实的项目中使用它，只是指出有其他选择。）当然，AngularJS使用了一个检查变更模型，但也更加明显。投资比KO或RivetsJS这样的简单库。

看起来不错，我需要的是，根据select中的选择元素隐藏和显示DOM元素。我已经考虑过自己建造一些东西，但这可能是最重要的。

这将是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>

现在，我通常会避免将计算放在 data-bind中（我使用计算机），但我想证明模型中的最小值。

将DOM元素属性直接绑定到其他元素

1 个答案: