<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody> </table> <script type="text/javascript"> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { firstName: 'Denise', lastName: 'Dentiste' } ] }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h4>People</h4> <ul data-bind="foreach: people"> <li> Name at position <span data-bind="text: $index"> </span>: <span data-bind="text: name"> </span> <a href="#" data-bind="click: $parent.removePerson">Remove</a> </li> </ul> <button data-bind="click: addPerson">Add</button> <script type="text/javascript"> function AppViewModel() { var self = this; self.people = ko.observableArray([ { name: 'Bert' }, { name: 'Charles' }, { name: 'Denise' } ]); self.addPerson = function() { self.people.push({ name: "New at " + new Date() }); }; self.removePerson = function() { self.people.remove(this); } } ko.applyBindings(new AppViewModel()); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h4>People</h4> <ul data-bind="foreach: months"> <li> The current item is: <b data-bind="text: $data"></b> </li> </ul> <script type="text/javascript"> ko.applyBindings({ months: [ 'Jan', 'Feb', 'Mar', 'etc' ] }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul data-bind="foreach: months"> <li> The current item is: <b data-bind="text:$data.firstName"></b> </li> </ul> <script type="text/javascript"> ko.applyBindings({ months: [ {firstName:"你的名字"},{firstName:"你的"}] }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> var viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li class="header">Header item</li> <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> </ul> <script type="text/javascript"> ko.applyBindings({ myItems: [ 'A', 'B', 'C' ] }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }"> <li data-bind="text: $data"></li> </ul> <button data-bind="click: addItem">Add</button> <script type="text/javascript"> ko.applyBindings({ myItems: ko.observableArray([ 'A', 'B', 'C' ]), yellowFadeIn: function(element, index, data) { $(element).filter("li") .css({ 'backgroundColor': '#f00' }) // .animate({ backgroundColor: 'white' }, 800); }, addItem: function() { this.myItems.push('New item'); } }); </script> </body> </html>