2014-01-13 4 views
0

Моя презумпция заключается в том, что «видимая» привязка KnockOutJs является двусторонней, поэтому, если я скрою элемент dom, связанный с свойством viewmodel, подписка на наблюдаемую будет обновляться. Мой образец в JsBin http://jsfiddle.net/zb6E9/20/ показывает, что если наблюдаемый изменяется, подписка срабатывает, но если элемент dom изменяется, подписка не срабатывает.KnockOutJs Visible Two-Way?

Мне что-то не хватает, но что делать, чтобы кнопка 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()); 
+0

Нет, привязка «видимого» только ** в одну сторону **: видимое связывание заставляет связанный элемент DOM скрываться или видиться в соответствии со значением, которое вы передаете привязке. – nemesv

+0

Значит, это отличается от других наблюдаемых свойств knockoutjs, таких как текст, где обновление dom обновляет модель? – WillC

+0

Да, большинство привязок односторонние, только некоторые из них двусторонние, как «значение» или «hasFocus», всегда описываются в документации, как работает данное связывание. – nemesv

ответ

1

Поскольку, как Майкл Бест отметил, что нет никакого способа для Нокаута обнаружить произвольные видимые изменения, вызванные внешним кодом, ключ чтобы сделать любой код, который должен изменить видимость, сделайте это, установив , используемый в привязке visible (так что Knockout знает, что происходит), а не напрямую манипулируя DOM. Почти всегда лучше, чтобы Knockout выполнял все манипуляции с DOM, либо изначально, либо через пользовательские привязки. Одна из самых важных моментов MV * заключается в том, что у вас есть единый орган для обновления представлений, а не для свободного.

+0

Не уверен, что я согласен с тем, что нужно пройти через модель MV * для сквозных задач. Могут быть подходы, которые не являются бесплатными для всех. В этом случае элемент управления будет находиться в общедоступном аккордеонном управлении, который хорошо работает и не хочет меняться с более конкретной логикой, но я получаю ваше мнение. – WillC

+0

Спасибо за помощь. Я, очевидно, ошибался в отношении двухстороннего связывания для видимых и т. Д. Я думаю, что документация Knockout может быть немного более очевидной в этом отношении ... (На днях я должен будет выяснить, какой пользовательский обработчик привязки KO сделайте эту работу. – WillC

Смежные вопросы