更新嵌套对象中的值并删除嵌套对象 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);     
};

弹出窗口（如下所示的模板代码）在打开时绑定到可观察组，但我不知道如何更新组属性..

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

上面的setcorrect answer给了我student对象，我怎么得到g 从单选按钮合并值并更新学生对象？？

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

真诚感谢任何帮助。

谢谢

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

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

的一个方法

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>

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

Updating a value in a nested object and deleting a nested object knockoutjs

knockout-2.0

knockout.js

knockout-sortable