Usuń wiersz tabeli za pomocą przycisku w nokaucie JS

Question

Everbody. Jestem nowy w KnockoutJS.
Nie będę robił tabeli ucznia. Nowy uczeń można dodać lub usunąć z tabeli.
Oto funkcja

function Friend(a, b){ 
} 

będzie obserwować szczegóły studenckich. Kolejna funkcja applyBinding

function functionViewModel() 

jeśli zostanie on usunięty, a następnie praca kod w porządku, ale przy użyciu tego kodu funkcji nie będzie działać na

this.deleteRow=function(){ 
fn.friends.remove(this); 
}; 

Jak nazywają „fn” zmienna z funkcją „functionViewModel”, aby funkcja " Przyjaciel".
Zaproponuj mi jakiś lepszy pomysł.

<table border="1"> 
    <thead> 
     <th>Full Name</th> 
     <th>Address</th> 
     <th>Graduate ?</th> 
     <th>Subject</th> 
     <th>Remove User</th> 
    </thead> 
    <tbody data-bind="foreach:friends"> 
     <tr> 
     <td data-bind="text:fullName"></td> 
     <td data-bind="text:address"></td> 
     <td><input type ="checkbox" data-bind="checked:graduate"></input></td> 
     <td><input type ="text" data-bind="value:subjects, visible:graduate"></input></td> 
     <td><input type= "button" data-bind="click:deleteRow" value="X"></input></td> 
     </tr> 
    </tbody> 
</table> 
<button data-bind="click:addUser">Add User</button> 
<script src="D:\KnockoutJS\knockout-3.2.0.js"></script> 
<script> 

    function Friend(a, b){ 
     this.fullName=a; 
     this.address=b; 
     this.graduate=ko.observable(false); 
     this.subjects=ko.observable(''); 

     //Remove Row from Table 
     this.deleteRow=function(){ 
     fn.friends.remove(this); 
     }; 
    } 

    function functionViewModel(){ 
     var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; 
     fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; 
     return fn; 
     }; 
    ko.applyBindings(functionViewModel()); 
</script> 

Answer 1

Myślę, że musisz wykonać jedną z następujących czynności.

1. Przenieść funkcję removeuser do głównego widoku modelu i usunąć na podstawie indeksu. Jeśli chcesz to zrobić w ten sposób wtedy

   http://jsfiddle.net/chLa93du/2/

w html (Widok)

<table border="1"> 
    <thead> 
     <th>Full Name</th> 
     <th>Address</th> 
     <th>Graduate ?</th> 
     <th>Subject</th> 
     <th>Remove User</th> 
    </thead> 
    <tbody data-bind="foreach:friends"> 
     <tr> 
     <td data-bind="text:fullName"></td> 
     <td data-bind="text:address"></td> 
     <td><input type ="checkbox" data-bind="checked:graduate"></input></td> 
     <td><input type ="text" data-bind="value:subjects, visible:graduate"></input></td> 
     <td><input type= "button" data-bind="click:$parent.removeUser" value="X"></input></td> 
     </tr> 
    </tbody> 
</table> 
<button data-bind="click:addUser">Add User</button> 

skryptu:

function Friend(a, b){ 
     this.fullName=a; 
     this.address=b; 
     this.graduate=ko.observable(false); 
     this.subjects=ko.observable(''); 
    } 

    function functionViewModel(){ 
     var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; 
     fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; 
     fn.removeUser = function(item){ 
       fn.friends.remove(item); 
     }; 
     return fn; 
     }; 
    ko.applyBindings(functionViewModel()); 

2. Możesz przechowywać główny widok modelu w zmiennej globalnej, a następnie dostęp. http://jsfiddle.net/chLa93du/

   var viewModel; 
   
   function Friend(a, b){ 
   this.fullName=a; 
   this.address=b; 
   this.graduate=ko.observable(false); 
   this.subjects=ko.observable(''); 
   this.deleteRow=function(){ 
       viewModel.friends.remove(this); 
   }; 
   } 
   
   function functionViewModel(){ 
   var fn={friends:ko.observableArray([new Friend("Sofia Smith", "London"), new Friend("Liam Taylor","New York")])}; 
   fn.addUser=function(){fn.friends.push(new Friend("Thomas Miller", "California"));}; 
   return fn; 
   }; 
   viewModel = new functionViewModel();ko.applyBindings(viewModel);