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);     
};

弹出窗口（下面显示的模板代码）在打开时绑定到obsetable组，但我无法弄清楚如何更新组属性..

<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 来自单选按钮的roup值并更新学生对象??

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

真心感谢任何帮助。

由于

更新：我甚至尝试了{value jsfiddle以下{check}，同样的问题..

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

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

1 个答案: