CODEWITHSUNDEEP
knockout.js
mk_yo
mk_yo

Reputation: 780

Knockout binding parents

Knockout bidning doesn'work. Can't access the "removeItem" function

Html

<div>   
<div data-bind="with: idea">
           <input type = "text"
            data-bind = 'value:itemToAdd' />
            <input type="button" data-bind="click:$parent.addItem" value="add" />
      <ul data-bind = "foreach:allItems">
          <li>
              <span data-bind = "text:$data"></span>
              <input type="button" data-bind="click: $parents[1].removeItem"                 value="remove"/>   
          </li>
      </ul> 
</div>
</div>

Script

var vm = {        
      idea: ko.observable({
          allItems: ko.observableArray(),
          itemToAdd : ko.observable("")
          }),
      addItem : function () {
        var item = this.itemToAdd();
        this.allItems.push(item);
        this.itemToAdd("");
    },
      removeItem : function (data) {
           this.allItems.remove(data);
    }
 };
ko.applyBindings(vm);

jsFiddle here Would appreciate any help. Thank you!

Upvotes: 0

Views: 120

Answers (1)

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16475

You can use bind function to assign appropriate value to this.

<input type="button" data-bind="click: $parents[1].removeItem.bind($parent, $data)" value="remove"/>

First parameter of bind func is the object that will be bound to this, second parameter is the first argument of the target function.

Here is working fiddle: http://jsfiddle.net/M2xDF/6/

Upvotes: 4

Related Questions