KnockOutJs 可见的两种方式？答案

【问题标题】：KnockOutJs Visible Two-Way?KnockOutJs 可见的两种方式？
【发布时间】：2014-01-14 06:55:24
【问题描述】：

我的假设是 KnockOutJs “可见”绑定是双向的，所以如果我隐藏绑定到 viewmodel 属性的 dom 元素，对 observable 的订阅将会更新。我在 JsBin http://jsfiddle.net/zb6E9/20/ 中的示例显示，如果可观察对象发生更改，则订阅会触发，但如果 dom 元素发生更改，则不会触发订阅。

我一定是遗漏了什么，但是如何让 jQuery 按钮触发订阅？

HTML：

<input id="firstNameInput" data-bind="value: firstName, visible: isVisible" value="First" /><br />
<input data-bind="value: lastName" value="Last" /><br />
The name is <span data-bind="text: fullName"></span><br />
<input type="button" data-bind="click: changeVisibility" value="Change Visibility using KnockOut" /><br />
<input type="button" onclick="changeVisibilityJQuery()" value="Change Visibility Using jQuery" />

Javascript：

function changeVisibilityJQuery()
{
       if($('#firstNameInput').is(':visible')){
           $('#firstNameInput').hide();
       } else {
            $('#firstNameInput').show();
       }
 }

function AppViewModel() {
    var self = this;

    self.firstName = ko.observable('First');
    self.lastName = ko.observable('Last');
    self.isVisible = ko.observable(true);
    self.changeVisibility = function(){
        var  v = self.isVisible() || false;
        self.isVisible(!v);
    };
    self.isVisible.subscribe(function(bool) {
        if (bool) {
           // DO SOMETHING SUCH AS 
            self.firstName(self.firstName() + " " + bool);
        }
    });
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}
ko.applyBindings(new AppViewModel());

【问题讨论】：

不，visible 绑定只是单向：可见绑定会导致关联的 DOM 元素根据您传递给绑定的值变为隐藏或可见.
所以这与其他敲除js的可观察属性不同，例如更新dom更新模型的文本？
是的，大多数绑定都是单向的，只有少数是双向的，例如 value 或 hasFocus 它总是在文档中描述给定绑定如何工作。
如果在 knockoutjs 之外操作 dom 元素，是否有办法绑定到可见性的变化？
Knockout 如何知道可见性发生了变化？没有changedVisibility 事件。

标签： knockout.js

【解决方案1】：

正如 Michael Best 所指出的，Knockout 无法检测到由外部代码引起的任意可见更改，关键是通过设置 observable visible 绑定（所以 Knockout 知道发生了什么）而不是直接操作 DOM。几乎总是最好让 Knockout 进行所有 DOM 操作，无论是本机还是通过自定义绑定。 MV* 最重要的一点是，您拥有更新视图的单一权限，而不是免费的。

【讨论】：

不确定我是否同意所有必须通过 MV* 模型来解决横切关注点的问题。可能有一些方法不是免费的。在这种情况下，控件将在站点范围的手风琴控件中运行良好，并且不希望使用更具体的逻辑进行更改，但我明白你的意思。
感谢您的帮助。我显然误认为 2-way 绑定是可见等。我确实认为 Knockout 文档可能对此更加明显......（其中一天）我将不得不找出一个 KO 自定义绑定处理程序来完成这项工作。