Нокаут: foreach, selectedvalue

Question

{ 
     "id": "0001", 
     "type": "donut", 
     "name": "Cake", 
     "ppu": 0.55, 
     "selectedToppingId": "", 
     "topping": 
      [ 
       { "id": "5001", "type": "None" }, 
       { "id": "5002", "type": "Glazed" }, 
       { "id": "5005", "type": "Sugar" }, 
       { "id": "5007", "type": "Powdered Sugar" }, 
       { "id": "5006", "type": "Chocolate with Sprinkles" }, 
       { "id": "5003", "type": "Chocolate" }, 
       { "id": "5004", "type": "Maple" } 
      ] 
} 

Я хотел был бы показать переключатели с выбором topping. код может выглядеть следующим образом:

<div data-bind="foreach: topping"> 
     <input type="radio" name="apps" data-bind="attr: { value: $data}, 
     checked: $parent.selectedTopping"/> 
     <span data-bind="text: $data"/> 
     <br/> 
    </div> 

Как я могу организовать мой ViewModel связывать Radiobuttons и selectedTopping (selectedToppingId должны toppingId по выбору)?

(Data = MyJSON)

Спасибо!

Answer 1

Одна вещь, которая не соответствует фрагменту, который вы дали, это <span data-bind="text: $data"/>, он должен быть <span data-bind="text: $data"></span>, чтобы он работал с нокаутом. Я не совсем понимаю, что ваш следующий, но ниже - рабочий пример того, что вы предоставили. есть несколько способов, по которым я думаю, что вы могли бы пойти. вы можете либо сопоставить входящие данные с вашей собственной моделью просмотра на стороне клиента, либо использовать что-то вроде knockout.mapping для преобразования входящих данных json в модели с нокаутом.

var data = { 
 
    "id": "0001", 
 
    "type": "donut", 
 
    "name": "Cake", 
 
    "ppu": 0.55, 
 
    "selectedToppingId": "", 
 
    "topping": 
 
     [ 
 
      { "id": "5001", "type": "None" }, 
 
      { "id": "5002", "type": "Glazed" }, 
 
      { "id": "5005", "type": "Sugar" }, 
 
      { "id": "5007", "type": "Powdered Sugar" }, 
 
      { "id": "5006", "type": "Chocolate with Sprinkles" }, 
 
      { "id": "5003", "type": "Chocolate" }, 
 
      { "id": "5004", "type": "Maple" } 
 
     ] 
 
}; 
 

 
var vm = function() { 
 
    var self = this; 
 
    self.toppings = ko.observableArray(data.topping); 
 
    self.selectedTopping = ko.observable("5007"); 
 

 
    return self; 
 
}; 
 

 
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="foreach: toppings"> 
 
    <input type="radio" name="apps" data-bind="attr: { value: $data.id}, 
 
     checked: $parent.selectedTopping" /> 
 
    <span data-bind="text: $data.type"></span> 
 
    <br/> 
 
</div> 
 

 
<p>Selected Topping Id is 
 
    <div data-bind="text: selectedTopping"></div> 
 
</p>

Answer 2

код будет отображать радио кнопки на основе списка, и сохранить выбранный идентификатор обратно в selectedToppingId переменной:

var data = 
 
{ 
 
     "id": "0001", 
 
     "type": "donut", 
 
     "name": "Cake", 
 
     "ppu": 0.55, 
 
     "selectedToppingId": "", 
 
     "topping": 
 
      [ 
 
       { "id": "5001", "type": "None" }, 
 
       { "id": "5002", "type": "Glazed" }, 
 
       { "id": "5005", "type": "Sugar" }, 
 
       { "id": "5007", "type": "Powdered Sugar" }, 
 
       { "id": "5006", "type": "Chocolate with Sprinkles" }, 
 
       { "id": "5003", "type": "Chocolate" }, 
 
       { "id": "5004", "type": "Maple" } 
 
      ] 
 
} 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.toppings = ko.observableArray(data.topping); 
 
    self.selectedTopping = ko.observable("5007"); 
 

 
    self.selectedTopping.subscribe(function(newValue) { 
 
\t //Find selected item from parent array \t 
 
\t var result = $.grep(data.topping, function(e){ return e.id == newValue; })[0]; 
 
\t 
 
\t //Assign the ID back to our data 
 
\t selectedToppingId = result.id; 
 
    }); 
 

 
    return self; 
 
}; 
 

 

 
ko.applyBindings(new ViewModel());

<script src="http://knockoutjs.com/downloads/knockout-latest.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div data-bind="foreach: toppings"> 
 
    <input type="radio" name="apps" data-bind="attr: {value: $data.id}, 
 
     checked: $parent.selectedTopping" /> 
 
    <span data-bind="text: $data.type"></span> 
 
    <br/> 
 
</div> 
 

 
<p>Selected Id: 
 
    <div data-bind="text: selectedTopping"></div> 
 
</p>