挖空: 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" }
            ]
}

我想要显示单选按钮与顶部的选择。代码可能如下所示：

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

(数据= MyJSON)

谢谢!

Answer 1

您给出的代码片段有一个错误，那就是<span data-bind="text: $data"/>必须是<span data-bind="text: $data"></span>才能与knockout一起工作。我不完全清楚你所做的是什么，但下面是你所提供的一个工作示例。我认为你可以走几条路。您可以自己将传入的数据映射到您自己的客户端视图模型，也可以使用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

代码将根据列表显示单选按钮，并将选定的ID保存回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>

​