Question

我的假设是KnockOutJs“可见”绑定是双向的，所以如果我隐藏绑定到viewmodel属性的dom元素，则会更新对observable的订阅。我在JsBin http://jsfiddle.net/zb6E9/20/中的示例显示，如果更改了observable，则会触发订阅，但如果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());

Answer 1

正如迈克尔·贝斯特所指出的那样，Knockout无法检测外部代码导致的任意可见变化，关键是要使任何必须改变可见性的代码通过设置observable来实现用于visible绑定（因此Knockout知道发生了什么），而不是直接操作DOM。让Knockout进行所有DOM操作几乎总是最好的，无论是原生还是通过自定义绑定。 MV *最重要的一点是，您拥有一个更新视图的权限，而不是一个免费的。

KnockOutJs可见双向？

1 个答案: