Блог

Вот подмножество разметки, которую я использую:

 <div id="item_one"></div>
<div id="item_two"></div>
<div id="item_three"></div>

<p id="result_one">0</p>
<p id="result_two">0</p>
<p id="result_three">0</p>
  

Желаемое поведение:

1. Когда вы щелкаете div, соответствующий текст тега p переключается с 0 на 1.
2. Текст тегов p должен быть объединен в строку, например, щелкните по второму элементу, и результирующей строкой будет «010».
3. Существует массив из восьми элементов с двоичными строками в качестве ключа. При выполнении щелчков выбранный элемент в массиве изменяется.

Это кажется хорошим использованием knockout, но я полный новичок. Как мне настроить правильные зависимости?

Вот пример одного из способов сделать это: http://jsfiddle.net/rniemeyer/XqDsy /

Для удобства я создал небольшой «binaryObservable», который предоставляет функцию переключения.

 function binaryObservable(initialValue) {
   var result = ko.observable(initialValue);
   result.toggle = function() {
       result(result() === "1" ? "0" : "1");    
   };
   return resu<
}

function ViewModel() {
   this.one = binaryObservable("0");
   this.two = binaryObservable("0");
   this.three = binaryObservable("0"); 

   this.combined = ko.dependentObservable(function() {
      return this.one()   this.two()   this.three();       
   }, this);

   this.choices = {
        "000": { id: 0, value: "000" },
        "001": { id: 1, value: "001" },
        "010": { id: 2, value: "010" },
        "011": { id: 3, value: "011" },
        "100": { id: 4, value: "100" },
        "101": { id: 5, value: "101" },
        "110": { id: 6, value: "110" },
        "111": { id: 7, value: "111" }
   };

   this.selectedChoice = ko.dependentObservable(function() {
       var combined = this.combined();
       return combined ? this.choices[combined] : {};
   }, this);   
}

ko.applyBindings(new ViewModel());
  

Тогда HTML может выглядеть следующим образом:

 <div id="item_one" data-bind="click: one.toggle">option one</div>
<div id="item_two" data-bind="click: two.toggle">option two</div>
<div id="item_three" data-bind="click: three.toggle">option three</div>

<hr/>

<p id="result_one" data-bind="text: one">0</p>
<p id="result_two" data-bind="text: two">0</p>
<p id="result_three" data-bind="text: three">0</p>

<hr/>

<p data-bind="text: combined"></p>

<hr/>

Selected choice: <span data-bind="text: selectedChoice().id"></span>
  

Я далеко не эксперт, но что-то вроде этого? jsFiddle