ko.js：动态生成的单选按钮和 'checked' 相关计算

Question

tl;dr：我使用 ajax 检索的对象数组来生成单选按钮列表。当单选按钮被选中时，我想对所选对象进行计算并将值保存在 ko.observable() 中，然后通过 HTML 文档显示data-bind.

这是我所做的：

首先，我正在检索用户对象数组（通过 ajax）：

var ViewModel = function() {

  var self = this;

  // an array of retrieved user objects
  self.retrievedUsers = ko.observableArray([]);

  self.getUsers = function() {
    $.getJSON('/retrieve-all-users', function(data) {
      self.retrievedUsers(data);
    });
  };
};

ko.applyBindings(new ViewModel());

检索到的数组如下所示：

[{'name': 'Johnny', 'age': 20}, {'name': 'Jenny', 'age': 21}]

然后，我使用这个数组来创建单选按钮：

<form>
  <!-- ko foreach: retrievedUsers -->
  <input type="radio" name="people" data-bind="checkedValue: name">
  <span data-bind="text: name"></span>
  <!-- /ko -->
</form>

这应该像这样呈现：

<form>
  <input type="radio" name="users" value="Johnny"> <span>Johnny</span>
  <input type="radio" name="users" value="Jenny"> <span>Jenny</span>
</form>

Goal: Whenever a radio button is checked (and a user is selected), I want to calculate the selected user's age in the upcoming year (user.age + 1) 并将计算出的年龄保存在 ko.observable() 中。

那么，我希望data-bind模板中的计算年龄：

<div>
    The selected person will be 
    <span data-bind="text: SelectedPersonAgeNextYear"></span>
    years old in the upcoming year.
</div>

感谢任何提示！

另一个用法示例：在酒店预订网站上，'rooms' 列表显示为单选按钮。选中房间后，会显示计算得出的价格（价格 + 税费 + 人数等）。

Answer 1

看这个fiddle： http://jsfiddle.net/vt6v6L9u/2/

html:

<form>
    <div data-bind="foreach: retrievedUsers">
        <div>
            <label data-bind="attr:{for:$index}">
                <input type="radio" name="people2" data-bind="attr: {id: $index,value: age}, checked: $root.selected" />
                <span data-bind="text: name"></span>
            </label>
        </div>
    </div>
</form>
<div>
    The selected person will be
    <span data-bind="text: SelectedPersonAgeNextYear"></span>
    years old in the upcoming year.
</div>
<button data-bind="click: getUsers">get users</button>

javascript:

var ViewModel = function () {

    var self = this;
    // an array of retrieved user objects
    self.retrievedUsers = ko.observable([]);

    self.getUsers = function () {
        self.retrievedUsers([{ 'name': 'Johnny', 'age': 20 }, { 'name': 'Jenny', 'age': 21 }]);
    };

    self.selected = ko.observable();
    self.SelectedPersonAgeNextYear = ko.computed(function () {
        return parseInt(self.selected(), 10) + 1;
    });
};

ko.applyBindings(new ViewModel());

ko.js：动态生成的单选按钮和 'checked' 相关计算

ko.js: Dynamically generated radio buttons and 'checked' dependent computations

javascript

json

knockout.js

radio-button