【发布时间】：2015-05-07 03:50:10
【问题描述】：
我目前正在尝试学习淘汰赛，所以请将所有答案保留在淘汰赛中。 我有一个公司 NBI 的联系人列表，在联系人列表的顶部显示“NBI 有 # 个员工”。目前我有一个超时，在 5 秒后填写初始联系人。我想要发生的是在 5 秒过去并显示员工之前不显示“ NBI Has #Employees”，id 还希望显示“Loading”来代替“NBI Has #Employees” ” 直到显示员工，然后将加载替换为“ NBI Has #Employees”。
这是一个小提琴http://jsfiddle.net/grahamwalsh/2cf8nr3t/
这是我的代码
html
<div class='NbiEmployees'>
<h2>NBI Employees</h2>
<h3>NBI has <span data-bind="text: employees().length"></span> Employees</h3>
<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; }
淘汰
var EmployeesModel = function () {
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.employees = ko.observableArray(
);
setTimeout(function () {
var data = [
{
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" }]
}
];
self.employees(ko.utils.arrayMap(data,function (employee) {
return { firstName: employee.firstName, lastName: employee.lastName, phones: ko.observableArray(employee.phones) };
}))},5000);
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("")
};
$(document).ready(function () {
ko.applyBindings(new EmployeesModel());
});
【问题讨论】：
标签： knockout.js