knockout.js 是否支持 html 元素之间的绑定？答案

【问题标题】：Does knockout.js support binding between html elements?knockout.js 是否支持 html 元素之间的绑定？
【发布时间】：2013-04-18 00:28:22
【问题描述】：

knockout.js 是否支持在没有视图模型的情况下绑定 bettwen html 元素，例如 Silverlight/Wpf 元素绑定？

示例：我有一个表单，我想根据一个字段（复选框）的值显示/隐藏字段。

有没有一种简单的方法可以让淘汰赛或纯 JavaScript 更直接？

我正在尝试实现一种基于数据属性的可重用方式，但它开始变得繁琐，我开始想知道淘汰赛是否是使其可重用的方法。

【问题讨论】：

我认为淘汰赛不支持 html 元素之间的绑定。即使是这样，你也应该在 js 中创建一个底层的 observable，并将你的 html 元素绑定到它。我给这个问题一个 +1 以抵消一些 [...] 给出的反对意见。不完全是一个不合理的问题。
我有一些 Silverlight 和 WPF 的背景，因此也有 MVVM 开发的背景，但我现在开始使用 HTML/JS 进行开发。我还没有开始使用淘汰赛，只是玩了一下。在这个特殊的案例中，我偶然发现了这种形式，并且我想我会在其他页面中再次遇到这种情况，我想知道淘汰赛是否会支持 XAML 所做的某些功能。我在文档中找不到有关此案的信息，所以我在这里问了。

标签： javascript knockout.js

【解决方案1】：

如果没有 ViewModel，您无法做到这一点，但您可以使用计算变量做到这一点：

//In your view model
this.showFormElement = ko.computed(function(){
    if(this.checkboxValueiswhatIwant()){
        return true;
    }
    return false;
}, this);

然后在你的 html 中：

<form [id, classes, etc..]>
    <input type="checkbox" data-bind="checked: checkboxValueiswhatIwant" />
    <input type="input" data-bind="visible: showFormElement" />
</form>

出于普遍的好奇，您如何在没有视图模型的情况下使用淘汰赛？

如果你以某种方式使用它，为什么？

【讨论】：

我不是。我目前的方法是纯 js，通过 id 搜索字段并订阅 onchange 事件。
嗯，是的，我假设您使用的是淘汰赛......这是它的构建目的，它根据事件更新 UI。如果您确实使用它，我给您的代码将起作用。
从技术上讲，您不需要计算。只需将checked 绑定添加到复选框，并将该可观察对象用于另一个元素上的visible 绑定。
True 可能应该多花一点时间，但如果他想获得更多技术，他也可以使用计算（你仍然可以在绑定中这样做，但会很快变得混乱）。
现在我会坚持使用纯 JS，但我相信你的方式将是使用 Knockout 的方式。谢谢