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

（Data = MyJSON）

谢谢！

Answer 1

您提供的代码片段有一个问题是<span data-bind="text: $data"/>它需要<span data-bind="text: $data"></span>才能与淘汰赛一起使用。我并不完全清楚你所提供的内容，但下面是你所提供的实例。有几种方法我觉得你可以去。你可以将传入的数据自己映射到你自己的客户端视图模型，或者你可以使用像knockout.mapping这样的东西将传入的json数据转换为淘汰视图模型。

＆＃13;

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());

＆＃13;

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

＆＃13;

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>

淘汰赛：foreach，selectedvalue

2 个答案: