Нокаут: foreach, selectedvalue

{
        "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" }
            ]
}

Хотелось бы вывести радиокнопки с выбором начинки. Код может выглядеть так:

    <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>

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

(Данные = MyJSON)

Спасибо!


knockout.js knockout-3.0
person francoisFra    schedule 31.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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>

person Nathan Fisher    schedule 01.09.2015

arrow_upward
0
arrow_downward

Код будет отображать переключатели на основе списка и сохранять выбранный идентификатор обратно в вашу переменную 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) {
	//Find selected item from parent array	
	var result = $.grep(data.topping, function(e){ return e.id == newValue; })[0];
	
	//Assign the ID back to our data
	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>

person Marius Dornean    schedule 01.09.2015