How Knockout JS Declarative Binding внутренне работает

Question

Я написал код, который по нажатию кнопки показывает или скрывает определенный div. Код находится в this fiddle. Код работает нормально, но я сомневаюсь, когда я изменяю значение наблюдаемого a и b при нажатии кнопки, а затем как вызывается метод toShow?

Вызывается ли это, когда что-то меняется в моем 'testViewModel'? Также, когда мне нужно использовать () внутри data-bind?

HTML код:

<button data-bind="click: $root.changeValue">Click Me!</button> 
<div data-bind="foreach: products"> 
    <div data-bind="visible: $root.toShow()"> 
    <div data-bind="text: name"></div> 
    <div data-bind="text: age"></div> 
    <div data-bind="text: gender"></div> 
    </div> 
</div> 

Javascript Код:

function testViewModel(){ 
    var self = this; 
    self.a = ko.observable(0); 
    self.b = ko.observable(0); 
    var prod = []; 
    for(var item in products){ 
    prod.push(new productItem(products[item])); 
    } 
    self.products = ko.observableArray(prod); 
    self.changeValue = function(){ 
    self.a(self.a()+1); 
    self.b(self.b()+1); 
    } 
    self.toShow = function(){ 
    if(self.a() % 2 === 0){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
    } 
} 

function productItem(product){ 
    var self = this; 
    self.name = ko.observable(product.name); 
    self.age = ko.observable(product.age); 
    self.gender = ko.observable(product.gender); 
} 

var products = [ 
{ 
    name: 'A', 
    age: 25, 
    gender: 'Male' 
}, 
{ 
    name: 'B', 
    age: 27, 
    gender: 'Female' 
}, 
{ 
    name: 'C', 
    age: 53, 
    gender: 'Female' 
}, 
{ 
    name: 'D', 
    age: 54, 
    gender: 'Male' 
} 
] 

ko.applyBindings(new testViewModel()); 

Answer 1

Первый вопрос, перефразировать:

<div data-bind="visible: $root.toShow()">...</div> 

self.a = ko.observable(0); 
self.b = ko.observable(0); 
self.toShow = function(){ 
    if(self.a() % 2 === 0){ 
    return true; 
    } 
    else{ 
    return false; 
    } 
} 

... когда я изменить значение наблюдаемой a или b на кнопку мыши, то как же метод toShow вызывается ?

Всякий раз, когда у вас есть любое допустимое выражение данных связывания в вашей точки зрения, Нокаут будет при первой оценке зарегистрировать дерево зависимостей для отслеживания observable (вкл. Наблюдаемые массивы и т.д.) влияет на значение данных привязку выражение. Он делает это для привязки к простым наблюдаемым, но также и для функций, подобных тем, которые у вас есть.

data-bind="visible: $root.toShow() Это означает, что будет делать с выбыванием увидит при первой оценке, что она зависит от a (но не на b!), И всякий раз, когда a изменяет это будет повторно оценивать visible связывания.

Второй вопрос:

... когда я должен использовать () внутри данные привязки?

Это уже было asked before, хотя ответы не очень полные в настоящее время ИМХО.Знать эти две вещи:

1. Наблюдаемое является функция и вызова его без аргументов получает его текущее значение.
2. Нокаут «волшебным образом» добавляет эти круглые скобки, если видит наблюдаемое имя как единственное в выражении привязки данных.

Так что всегда безопасно и необязательно делать myObservable() внутри данные привязки, и вы можете иногда (например, когда наблюдаемое имя является единственным битом выражения) оставить вне скобок.

P.S.:

Ваше имя вопроса спрашивает «как оно работает внутри», поэтому обратите внимание, что нокаут open source, и вы можете взглянуть на e.g. the expression rewriting самостоятельно.

Answer 2

В вашем примере toShow будет срабатывать только один раз, когда представление будет оказывать. Для того, чтобы нокаут для отслеживания зависимостей, которые Вы должны сделать это как вычислен

<code> 
self.toShow = ko.computed(function(){ 
    var x = self.a(); 
    if(x % 2 === 0){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
}); 
</code> 

Возьмите уведомление, что у меня есть получить значение наблюдаемых А до того, как если даного - это для убедиться, что нокаут отслеживать эту зависимость в этом вычислениях всегда , Потому что в вашем примере, если он переходит в ветку else, больше не будет зависимости от a.

Что касается второго вопроса: скобки не нужны для вычисляемых и наблюдаемых. Простые функции должны иметь их.