第九章：高级应用举例.pdfVIP

第九章：⾼级应⽤举例 1 Contacts editor 这个例⼦和微软为演⽰j Query Data Linking Proposal例⼦提供的例⼦⼀样的提供的，我 们可以看看Knockout实现是难了还是容易了。 代 量的多少不重要 （尽快Knockout 的实现很简洁），重要的看起来是否容易理解且 可读。查看HTML源代 ，看看如何实现的view model 以及绑定的。 代码: View h2Contacts/h2 div id=contactsList data-bind=template: contactsListTemplate /div script type=text/html id=contactsListTemplate table class=contacts ditor tr thFirst name/th thLast name/th thPhone numbers/th /tr {{each(i, contact) contacts()}} tr td input data-bind=value: firstName/ diva href=# data-bind=click: function() { viewModel.removeCo /td tdinput data-bind=value: lastName//td td table {{each(i, phone) phones}} tr tdinput data-bind=value: type tdinput data-bind=value: numbe tda href=# data-bind=click: /tr {{/each}} /table a href=# data-bind=click: function() { viewModel.addPhone(cont /td /tr {{/each}} /table /script p button data-bind=click: addContact Add a contact/button button data-bind=click: save, enable: contacts().length 0 Save to JSON/button /p textarea data-bind=value: lastSavedJson rows=5 cols=60 disa 代码: View model var viewModel = { contacts: new ko.observableArray([ { firstName: Danny, lastName: LaRusso, phones: [ { type: Mobile, number: (555) 121-2121 }, { type: Home, number: (555) 123-4567}] }, { firstName: Sensei, lastName: Miyagi, phones: [ { type: Mobile, number: (555) 444-2222 }, { type: Home, number: (555) 999-1212}] } ]), addContact: function () { viewModel.contacts.push({ firstName: , lastNa