The following is an updated knockout-sortable seating assignment example: jsfiddle
The following shows the students in tables with gender info and two buttons. One button is to delete the student object.
The other opens a popover with 4 radio buttons which is binded to the students group property.
<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>
I'm unable to figure out how to delete the student object..I tried the following unsuccessfully..
this.remStudent=function(student){
console.log(student);
tables.students.remove(student);
};
The popover (template code shown below) gets bound to he group observable when opened but I'm unable to figure out how to update the group property..
<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>
The setcorrect answer above gives me the student object, how do I get the g roup value from radio button and update the student object??
this.setCorrectAnswer = function(student) {
console.log(student);
}
Any help is sincerely appreciated.
Thanks
UPDATE: I even tried checkedvalue as below jsfiddle, same problem..
<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>
your problem in a current binding context. In my opinion remStudent function should be a method of 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);
};
Edited jsfiddle >>fiddle
More about binding context knockout binding context info
Second problem. If you want change group property of specific student than change your binding to above >>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>