在knockoutJS中使用按钮删除表格行

Question

感到沉沦.我是KnockoutJS的新手.
我不想做学生的桌子.可以在表格中添加或删除新学生.
这是功能

function Friend(a, b){
}

将观察学生的详细信息 applyBinding的另一个功能

function functionViewModel()

如果它将被删除然后代码工作正常但使用此功能代码将无法正常工作

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

如何从函数"functionViewModel"调用"fn"变量到函数"Friend".
建议我,如果有更好的主意.

<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

我认为你必须做以下任一事情。

1. 将removeuser函数移至主视图模型并基于索引删除。如果你想这样做

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

在 Html 中（视图）

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

你的脚本：

    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. 您可以将主视图模型存储在全局变量中然后访问。 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);