更新嵌套对象中的值并删除嵌套对象 knockoutjs

Question

以下是更新后的可淘汰排序座位分配示例：jsfiddle

下面的表格显示了带有性别信息和两个按钮的学生。 一键删除学生对象。

另一个打开一个带有 4 个单选按钮的弹出框，该按钮绑定到学生组属性。

 <div>   <span class="student" data-bind="text: (gender() == 'male' ? '[M]':'[F]') + name()"></span>  <button class="btn btn-xs btn-danger" data-bind="click: $root.remStudent">x</button><button class="btn btn-xs btn-success"  data-bind="popover: {template: 'popoverBindingTemplate', title: 'Popover', trigger: 'click'}">-</button></div>

我无法弄清楚如何删除学生对象..我尝试了以下失败..

this.remStudent=function(student){ 
    console.log(student);
    tables.students.remove(student);     
};

弹出框（如下所示的模板代码）在打开时绑定到他的组 observable，但我无法弄清楚如何更新组属性..

<tbody>
   <tr><td>
      <input type="radio" value="griffindor" data-bind="checked: group(),click: $root.setCorrectAnswer" />
      <span data-bind="text: 'griffindor'"></span>
   </td></tr>
   <tr><td>
       <input type="radio" value="ravenclaw" data-bind="checked: group(),click: $root.setCorrectAnswer" />
       <span data-bind="text: 'ravenclaw'"></span>
   </td></tr>
   <tr><td>
       <input type="radio" value="hufflepuff" data-bind="checked: group(),click: $root.setCorrectAnswer" />
       <span data-bind="text: 'hufflepuff'"></span>
   </td></tr>
   <tr><td>
       <input type="radio" value="slytherin" data-bind="checked: group(),click: $root.setCorrectAnswer" />
       <span data-bind="text: 'slytherin'"></span>
    </td></tr>
    </tbody>

上面设置正确的答案给了我学生对象，我如何得到 g 从单选按钮组合值并更新学生对象？？

this.setCorrectAnswer = function(student) {
    console.log(student);
}

真诚感谢任何帮助。

谢谢

更新： 我什至尝试了如下jsfiddle的checkedvalue，同样的问题..

<tbody data-bind="foreach: $root.radiobuttonitems">
    <tr><td>
        <input type="radio" name="flavorGroup" data-bind="checkedValue:itemName, checked: $parent.group()" />
        <span data-bind="text: itemName"></span>
    </td></tr>
</tbody>

Answer 1

您在当前绑定上下文中的问题。在我看来 remStudent 函数应该是 Table 对象的一个​​方法

var Table = function(id, students) {
this.students = ko.observableArray(students);
this.students.id = id;

this.removeStudent = function(student) {
    this.students.remove(student);
}.bind(this);

};

编辑 jsfiddle >>fiddle

更多关于绑定上下文knockout binding context info

第二个问题。如果您想更改特定学生的组属性，而不是将绑定更改为上述>>fiddle2

<script id="popoverBindingTemplate" type="text/html">
<span data-bind="text: ko.toJSON($data, null, 2)"></span>
<button class="close pull-right" data-dismiss="popover" type="button">×</button>
<table class="table table-striped">
    <tbody>
        <tr>
            <td>
                <input data-bind="checked: group" type="radio" value="griffindor"/>
                <span data-bind="text: 'griffindor'"/>
            </td>
        </tr>
        <tr>
            <td>
                <input data-bind="checked: group" type="radio" value="ravenclaw"/>
                <span data-bind="text: 'ravenclaw'"/>
            </td>
        </tr>
        <tr>
            <td>
                <input data-bind="checked: group" type="radio" value="hufflepuff"/>
                <span data-bind="text: 'hufflepuff'"/>
            </td>
        </tr>
        <tr>
            <td>
                <input data-bind="checked: group" type="radio" value="slytherin"/>
                <span data-bind="text: 'slytherin'"/>
            </td>
        </tr>
    </tbody>
</table>