Rimuovere la riga della tabella usando il pulsante in knockoutJS

Question

Everbody. Sono nuovo di KnockoutJS.
Non voglio fare il tavolo dello studente. Nuovo studente può essere aggiunto o rimosso dalla tabella.
Ecco funzione

function Friend(a, b){ 
} 

osserverà dettagli studenti. Un'altra funzione per applyBinding

function functionViewModel() 

se sarà rimosso poi lavoro codice bene, ma se usi questo codice funzione non funzionerà a

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

Come chiamare "fn" variabile da funzione "functionViewModel" a funzionare " Amico".
Suggeriscimi una migliore idea.

<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

Penso che devi fare una delle seguenti cose.

1. Spostare la funzione removeuser nel modello di visualizzazione principale e rimuoverla in base a un indice. Se si vuole fare in questo modo, allora

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

In Html (Visualizza)

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

script:

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. È possibile memorizzare il modello di vista principale nella variabile globale, quindi accedere. 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);