странно "не определен" ошибка

Question

У меня есть следующий код в моем ViewModel:

CA = function (clientNum) { 
    this.CAName = null; 
    this.CAAdress = null; 
    this.CAIdNum = null; 
    this.CAContact = null; 
    this.CANote = null; 
    this.CAType = null; 
    this.clNum = clientNum; 
}, 
viewModelNewCredit = function() { 
    var 
    creditRows = ko.observableArray(), 
     showView = ko.observable(), 
     sessionTicket = ko.observable(), 
     loggedUser = ko.observable() 
     newCreditRows = function() { 
      console.log(this.clientNum()); 
      this.creditRows.push(new CA(this.clientNum())); 
      console.log(creditRows()); 
     }, 

     remove = function (ca) { 
      this.creditRows.remove(ca); 
     }; 
    return { 
     creditRows: creditRows, 
     showView: showView, 
     sessionTicket: sessionTicket, 
     loggedUser: loggedUser, 
     viewModelNewCredit: viewModelNewCredit, 
     remove: remove 
    }; 
}, 

И в моем HTML у меня есть:

<tbody data-bind="foreach: creditRows"> 
    <tr> 
     <td> 
      <select name="CAType" id="CAType" data-bind="value: CAType" style="width: 8em;"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
     </td> 
     <td> 
      <input type="text" name="CAName" id="CAName" data-bind="value: CAName" style="width: 15em;"> 
     </td> 
     <td> 
      <input type="text" name="CAAdress" data-bind="value: CAAdress" style="width: 15em;"> 
     </td> 
     <td> 
      <input type="text" name="CAIdNum" data-bind="value: CAIdNum" style="width: 6em;"> 
     </td> 
     <td> 
      <input type="text" name="CAContact" data-bind="value: CAContact" style="width: 10em;"> 
     </td> 
     <td> 
      <input type="text" name="CANote" data-bind="value: CANote" style="width: 15em;"> 
     </td> 
     <td> 
      <img src="/projMonitoring/js/images/close.jpg" alt="Close" data-bind="click: remove.bind($parent)"> 
     </td> 
    </tr> 
</tbody> 
</table> 
<button type="button" id="newRow" class="button" data-bind="click: newCreditRows">Add new row</button> 
<button type="button" id="OpenModal" class="button" data-bind="click: openModal">Open Modal</button> 

Эта строка кода: <img src="/projMonitoring/js/images/close.jpg" alt="Close" data-bind="click: remove.bind($parent)"> предполагается выполняйте функцию, но я получаю:

Error: Unable to parse bindings. Message: ReferenceError: remove is not defined; Bindings value: click: remove.bind($parent)

У вас есть идея, что происходит? Я почти уверен, что мне не хватает чего-то очень маленького, но я не могу это заметить.

Answer 1

Вы находитесь в контексте foreach, поэтому, когда вы вызываете метод remove, вы пытаетесь вызвать его на элементе из массива, который вы проходите. вместо этого вы должны вызвать его на ViewModel:

<img src="/projMonitoring/js/images/close.jpg" alt="Close" data-bind="click: $root.remove"> 

Answer 2

У вас должен быть экземпляр вашей модели просмотра. Измените ваше связывание следующим образом:

var x = new viewModelNewCredit(); 
ko.applyBindings(x); 

Несколько приближенное демо на http://jsfiddle.net/gE3a7/.