knockout parent and root binding

Question

i have a problem with parent and root binding.

function SignCell() {
         var self = this;
         self.MathSign = ko.observable("+");
         self.AdditionCell = ko.observable("");
     }     
     function Expression(cell) {
         var self = this;
         self.BaseCell = ko.observable(cell);
         self.AddCell = ko.observableArray([]);
     }

 function Condition(active, expression1, sign, expression2, errMassage) {
     var self = this;
     self.Active = ko.observable(active);
     self.Expression1 = expression1;
     self.Sign = ko.observable(sign);
     self.Expression2 = expression2;
     self.ErrMassage = ko.observable(errMassage);
 }
 var ViewModel = function() {
     var self = this;
     self.ConditionArray = ko.observableArray([
         new Condition(true,new Expression(""),"=",new Expression(""),"")
     ]);     
     self.RemoveExpr1 = function () {
         var i = self.ConditionArray.indexOf(arr);
         self.ConditionArray()[i].Expression1.AddCell.push(new Expression());
     };         
 };

and html

<tbody data-bind="foreach: ConditionArray">
    <tr>
      <td><input class="input-small" data-bind="value: Expression1.BaseCell"/> 
             <table>
                <tbody  data-bind="foreach: Expression1.AddCell">
                    <tr>                          
                            <button data-bind="click: $parent.RemoveExpr1" class="btn btn-danger"> <i class="icon-minus-sign icon-white"></i></button>
                        </td>
                    </tr>
                </tbody>
            </table>

i can't call function self.RemoveExpr1 using click: $parent.RemoveExpr1" have you any ideas how to solve this problem

Answer 1

Use $root.RemoveExpr1 instead of $parent.RemoveExpr1

You are inside a nested loop. The function you want is attached to the ViewModel. Here $root refers to the ViewModel not $parent.