javascript - 添加接触计数器 knockout

Question

目前我正在努力建立员工联系人列表。我希望发生的是在顶部显示“NBI 有 X 名员工”，并且每次有人单击“添加”和“员工”时，x 都会更新为员工总数。

这是一个 fiddle http://jsfiddle.net/grahamwalsh/2cf8nr3t/

HTML

<div class='NbiEmployees'> 

<h2>NBI Employees</h2>
<div id='employeesList'>
    <table class='employeesEditor'>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Phone numbers</th>
        </tr>
        <tbody data-bind="foreach: employees">
            <tr>
                <td>
                    <input data-bind='value: firstName' />
                    <div><a href='#' data-bind='click: $root.removeEmployee'>Delete</a></div>
                </td>
                <td><input data-bind='value: lastName' /></td>
                <td>
                    <table>
                        <tbody data-bind="foreach: phones">
                            <tr>
                                <td><input data-bind='value: type' /></td>
                                <td><input data-bind='value: number' /></td>
                                <td><a href='#' data-bind='click: $root.removePhone'>Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addPhone'>Add number</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<p>
    <button data-bind='click: addEmployee'>Add an Employee</button>
    <button data-bind='click: save, enable: employees().length > 0'>Save to JSON</button>
</p>

<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>

CSS

body { font-family: arial; font-size: 14px; }

.NbiEmployees { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.NbiEmployees input { font-family: Arial; }
.NbiEmployees b { font-weight: bold; }
.NbiEmployees p { margin-top: 0.9em; margin-bottom: 0.9em; }
.NbiEmployees select[multiple] { width: 100%; height: 8em; }
.NbiEmployees h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

.NbiEmployees TR { vertical-align: top; }
.NbiEmployees TABLE, .NbiEmployees TD, .NbiEmployees TH { padding: 0.2em; border-width: 0; margin: 0; }
.NbiEmployees TD A { font-size: 0.8em; text-decoration: none; }
.NbiEmployees table.contactsEditor > tbody > TR { border-bottom: 1px solid silver; }
.NbiEmployees td input { width: 8em; }

 li { list-style-type: disc; margin-left: 20px; }

knockout

var initialData = [
{ firstName: "Graham", lastName: "Walsh", phones: [
    { type: "Office", number: "(555) 121-2121" },
    { type: "Mobile", number: "(555) 123-4567"}]
},
{ firstName: "Kimi", lastName: "Shirasaki", phones: [
    { type: "Office", number: "(555) 444-2222" },
    { type: "Mobile", number: "(555) 999-1212"}]
}
];

var EmployeesModel = function(employees) {
var self = this;
self.employees = ko.observableArray(ko.utils.arrayMap(employees, function(employee) {
    return { firstName: employee.firstName, lastName: employee.lastName, phones: ko.observableArray(employee.phones) };
}));

self.addEmployee = function() {
    self.employees.push({
        firstName: "",
        lastName: "",
        phones: ko.observableArray()
    });
};

self.removeEmployee = function(employee) {
    self.employees.remove(employee);
};

self.addPhone = function(employee) {
    employee.phones.push({
        type: "",
        number: ""
    });
};

self.removePhone = function(phone) {
    $.each(self.employees(), function() { this.phones.remove(phone) })
};

self.save = function() {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.employees), null, 2));
};

self.lastSavedJson = ko.observable("")
};

 ko.applyBindings(new EmployeesModel(initialData));

Answer 1

您可以使用employees().length输出数据:

<h3>NBI has Employees <span data-bind="text: employees().length"></span> Employees</h3>