knockout.jsknockout-2.0knockout-sortable

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


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>

Solution

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