问题描述:

Everbody. I am new to KnockoutJS.

I wan't to make table of student. New student can be added or remove from table.

Here is function

function Friend(a, b){

}

will observe student details. Another function for applyBinding

function functionViewModel()

if it will removed then code work fine but using this function code will not work at

this.deleteRow=function(){

fn.friends.remove(this);

};

How to call "fn" variable from function "functionViewModel" to function "Friend".

Suggest me if any better 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>

网友答案:

I think you have to do either one of following thing .

  1. Move removeuser function to main view model and remove based on an index. If you want to do this way then

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

In Html (View)

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

Your 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());
  1. You can store main view model in global variable then access. 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);
    
相关阅读:
Top