ko.js:动态生成的单选按钮和“已检查"相关的计算 [英] ko.js: Dynamically generated radio buttons and 'checked' dependent computations

问题描述

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

tl;dr: I use an ajax-retrieved array of objects to generate a list of radio buttons. When a radio button is checked, I want to make compute on the selected object and save the value inside a ko.observable() which is then shown in the HTML document via data-bind.

这就是我所做的:

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

Firstly, I am retrieving array of user objects (via 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}]

然后，我使用此数组创建单选按钮:

Then, I use this array to create radio buttons:

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

目标:无论何时选中单选按钮(并选择了一个用户)，我都想计算下一年中所选用户的年龄(user.age +1)并保存此计算出的年龄在ko.observable()中.

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) and save this computed age in an ko.observable().

然后，我希望在模板中data-bind计算出的年龄:

Then, I hope to data-bind the computed age in the template:

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

我感谢任何提示！

另一个用法示例:在酒店预订网站上，房间"列表显示为单选按钮.选中房间后，会显示计算出的价格(价格+税金+人数等).

Another example usage: On a hotel booking website, a list of 'rooms' are shown as radio buttons. When a room is checked, a computed price is shown (price + tax + number of persons, etc).

推荐答案

查看此小提琴: 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:

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:动态生成的单选按钮和“已检查"相关的计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！