javascript - 动态单选按钮绑定(bind)选中的属性是动态的

Question

首先，我是 knockout/javascript 的新手，我目前正在做一个“未完成”的项目，我正在创建一个“动态选项”，问题是我的 ViewModel 绑定(bind)到我的 ItemModel(包含 5 个属性 HS01 - HS02 - HS03 - HS04 - HS05) 选择 OptionsBox 时需要绑定(bind)。检查:$parent.(dynamic property) 似乎不起作用。

这是代码示例。

HTML

<input data-bind="value: HS01" />
                            <table class="table table-condensed">
                                <tbody data-bind="foreach: HealthAndSafety">
                                <tr>
                                    <td class="col-xs-9">
                                        <span data-bind="html: contenu"></span>
                                        <!-- ko if: $data.id == 'HS01' -->
                                        <br/>
                                        <ul style="list-style-type: disc">
                                            <!-- ko foreach: $root.HealthAndSafetyChild -->
                                            <li data-bind="text: $data.contenuChild"></li>
                                            <!-- /ko -->
                                        </ul>
                                        <!-- /ko -->
                                    </td>
                                    <!--<div style="border: 3px red dashed;">-->
                                    <td class="col-xs-2">
                                        <input type="radio"  data-bind="attr:{value:id,name:group,checked: checkedProperty} , checkedValue: 0"/>
                                        <input type="radio"  data-bind="attr:{value:id,name:group,checked: checkedProperty} , checkedValue: 1"/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

这里的 JavaScript (viewmodel) 是每个 UL 都有多个 Li 等...然后它们只是 1 个绑定(bind)到父 viewmodel 的是/否单选按钮

 m.HealthAndSafety = ko.observableArray([
                 { id: 'HS01', group: 'HS01Group', checkedProperty: '$parent.HS01', contenu: f.lang('HealthSafety01') },
                 { id: 'HS02', group: 'HS02Group', checkedProperty: '$parent.HS02', contenu: f.lang('HealthSafety02') },
                 { id: 'HS03', group: 'HS03Group', checkedProperty: '$parent.HS03', contenu: f.lang('HealthSafety03') },
                 { id: 'HS04', group: 'HS04Group', checkedProperty: '$parent.HS04', contenu: f.lang('HealthSafety04') },
                 { id: 'HS05', group: 'HS05Group', checkedProperty: '$parent.HS05', contenu: f.lang('HealthSafety05') }]);
            m.HealthAndSafetyChild = ko.observableArray([{ idChild: 'HS01_1', contenuChild: f.lang('HealthSafety01_1') }, { idChild: 'HS01_2', contenuChild: f.lang('HealthSafety01_2') }, { idChild: 'HS01_3', contenuChild: f.lang('HealthSafety01_3') }, { idChild: 'HS01_4', contenuChild: f.lang('HealthSafety01_4') }, { idChild: 'HS01_5', contenuChild: f.lang('HealthSafety01_5') }, { idChild: 'HS01_6', contenuChild: f.lang('HealthSafety01_6') }]);

当我发布模型以更新数据库时，属性 HS01 等为空且未绑定(bind)。我已经测试了多个案例，但我不知道如何将我的 ObservableArray (CheckedProperty) 绑定(bind)到已检查的属性。

我也试过

<input type="radio"  data-bind="attr:{value:id,name:group} checked: (checkedProperty / #data.checkedProperty) , checkedValue: 0"/>

我在 Stackoverflow 上找到的所有示例都只绑定(bind)到 1 个属性

谢谢!

编辑1 http://jsfiddle.net/grosjambon/azz3tpfy/7/

编辑2找到了一种更简洁的方法来解决我的问题 仍然不是完全最优但比我的另一个更好，它在 html 中有多个 If 条件。在实现罗伊回答时

HTML

 <div style="border: 3px red dashed;">
                                                <label class="radio-inline">
                                                    <input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '1',event: {change : $root.onInputChangeUpdateVMHSProperty }" />
                                                    Yes
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0' ,event: {change : $root.onInputChangeUpdateVMHSProperty }" />
                                                    No
                                                </label>
                                            </div>         

JavaScript

m.onInputChangeUpdateVMHSProperty = function (item) {
                switch (item.id) {
                    case "HS01":
                        m.HS01(item.checkedProperty());
                        break;
                    case "HS02":
                        m.HS02(item.checkedProperty());
                        break;
                    case "HS03":
                        m.HS03(item.checkedProperty());
                        break;
                    case "HS04":
                        m.HS04(item.checkedProperty());
                        break;
                    case "HS05":
                        m.HS05(item.checkedProperty());
                        break;                       
                }                  
            };

Answer 1

主要问题:

1. 不要使用checked属性，使用checked绑定(bind)
2. checkedProperty 应该是一个可观察对象本身，而不是可观察对象的名称

所以你的数组元素看起来像这样:

{
  id: 'HS01',
  group: 'HS01Group',
  group2: 'HS01Group2',
  checkedProperty: ko.observable(),
  contenu: 'test1'
}

您的输入行将是:

<div data-bind="foreach: HealthAndSafety">
  <span data-bind="text: $index"></span>
  <input data-bind="value: checkedProperty" />
</div>

你的单选按钮看起来像:

<input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0'" />

function SeatReservation(name, initialMeal) {
  var self = this;
  self.name = name;
  self.meal = ko.observable(initialMeal);
}


// Here's my data model
var ViewModel = function() {
  var self = this;

  self.HealthAndSafety = ko.observableArray([{
    id: 'HS01',
    group: 'HS01Group',
    group2: 'HS01Group2',
    checkedProperty: ko.observable(),
    contenu: 'test1'
  }, {
    id: 'HS02',
    group: 'HS02Group',
    group2: 'HS02Group2',
    checkedProperty: ko.observable(),
    contenu: 'test2'
  }, {
    id: 'HS03',
    group: 'HS03Group',
    group2: 'HS03Group2',
    checkedProperty: ko.observable(),
    contenu: 'test3'
  }, {
    id: 'HS04',
    group: 'HS04Group',
    group2: 'HS04Group2',
    checkedProperty: ko.observable(),
    contenu: 'test4'
  }, {
    id: 'HS05',
    group: 'HS05Group',
    group2: 'HS05Group2',
    checkedProperty: ko.observable(),
    contenu: 'test5'
  }]);
};

ko.applyBindings(new ViewModel()); // This makes Knockout get to work

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <h1>
 Just testing if the property get binded when u click a radioButton 
 </h1>
  <h1>
  Example that works now
  </h1>
  <div data-bind="foreach: HealthAndSafety">
    <span data-bind="text: $index"></span>
    <input data-bind="value: checkedProperty" />
  </div>
  <table>
    <tbody data-bind="foreach: HealthAndSafety">
      <tr>
        <td class="col-xs-2">
          <input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '0'" />
          <input type="radio" data-bind="attr:{name:id}, checked: checkedProperty, checkedValue: '1'" />
        </td>

      </tr>
    </tbody>
  </table>
</div>