Добавить и удалить Элементы на стороне клиента с помощью Knockoutjs

Question

Я изо всех сил пытаюсь создать интерактивную форму, в которой в viewmodel есть коллекция предметов. Я хочу динамически добавить/удалить элементов из этой коллекции.

Мне было трудно найти примеры, которые идут на эту глубину, и большинство из них обычно остаются на более прямой реализации, однако я столкнулся с This post, что в значительной степени объясняет, что я делаю с этой блестящей jsfiddle, в котором json вытаскивается с использованием плугана отображения нокаута и затем отображается.

var company; 

function PersonViewModel(data) { 
    var personMapping = { 
    'ignore': ['twitter', 'webpage'], 
    'copy': ['age'], 
    'lastName': { 
     'create': function (options) { 
     return ko.observable(options.data.toUpperCase()); 
     } 
    } 
    }; 

    ko.mapping.fromJS(data, personMapping, this); 

    this.fullName = ko.computed(function() { 
    return this.firstName() + ' ' + this.lastName(); 
    }, this); 
} 

function CompanyViewModel(data) { 
    var companyMapping = { 
    'ignore': ['address', 'website'], 
    'name': { 
     'create': function (options) { 
     return ko.observable(options.data.toUpperCase()); 
     } 
    }, 
    'employees': { 
     key: function (data) { 
     return ko.utils.unwrapObservable(data.personId); 
     }, 
     create: function (options) { 
     return new PersonViewModel(options.data); 
     } 
    } 
    }; 

    ko.mapping.fromJS(data, companyMapping, this); 
} 

Что я не знаю, как достичь в , как и где точно добавить «addEmployee» и функции «» removeEmployee? и как связать их с кнопкой ?.

Спасибо заранее!

Answer 1

Логическое место, чтобы добавить их бы к вашему CompanyViewModel. Например, что-то вроде этого:

function CompanyViewModel(data) { 
    var self = this; 
    var companyMapping = { 
    // ...as before 
    }; 

    self.addEmployee = function() { 
    // as an example, we are just adding a static new employee 
    self.employees.push(new PersonViewModel({ 
     lastName: "new", 
     firstName: "employee", 
     age: 10 
    })); 
    } 

    // important, with how we are binding the function, we expect the 
    // argument, e, to be the employee to remove 
    self.removeEmployee = function (e) { 
    self.employees.remove(e); 
    } 

    ko.mapping.fromJS(data, companyMapping, this); 
} 

Добавить связать, вы можете сделать что-то вроде этого:

<div id="company"> 
    <h1 data-bind="text: name"></h1> 
    <h2>Employees</h2> 
    <input type="button" value="add" data-bind="click: addEmployee" /> 
    <table> 
    <thead> 
     <tr> 
     <th>Full name</th> 
     <th>Last name</th> 
     <th>First name</th> 
     <th>Age</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: employees"> 
     <tr> 
     <td data-bind="text: fullName"></td> 
     <td data-bind="text: lastName"></td> 
     <td data-bind="text: firstName"></td> 
     <td data-bind="text: age"></td> 
     <td> 
      <input type="button" value="x" data-bind="click: $parent.removeEmployee" /> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Что добавит add кнопку, а также Вытащите x кнопку для каждого сотрудника, который вызывает функция removeEmployee на родительском CompanyViewModel, проходящей в текущем сотруднике.

Вот обновленный fiddle

Answer 2

Вы бы добавили эти функции в ваш CompanyViewModel.

CompanyViewModel

... 
this.addEmployee = function() { 
    this.employees.push(new PersonViewModel({ 
     firstName: 'New', 
     lastName: 'Employee', 
     age: 777, 
    })); 
}; 
this.removeEmployee = function() { 
    this.employees.pop(); 
}; 

HTML

.... 
<div data-bind="click: addEmployee">Add Employee</div> 
<div data-bind="click: removeEmployee">Remove Employee</div> 
... 

http://jsfiddle.net/HBKYP/198/