标签:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> </head> <body> <h3>Meal upgrades</h3> <p>Make your flight more bearable by selecting a meal to match your social and economic status.</p> Chosen meal: <select data-bind="options: availableMeals, optionsText: ‘mealName‘, value: chosenMeal"></select> <p> You‘ve chosen: <b data-bind="text: chosenMeal().description"></b> (price: <span data-bind=‘text: formatPrice(chosenMeal().extraCost)‘></span>) </p> <script type="text/javascript"> var availableMeals = [ { mealName: ‘Standard‘, description: ‘Dry crusts of bread‘, extraCost: 0 }, { mealName: ‘Premium‘, description: ‘Fresh bread with cheese‘, extraCost: 9.95 }, { mealName: ‘Deluxe‘, description: ‘Caviar and vintage Dr Pepper‘, extraCost: 18.50 } ]; var viewModel = { chosenMeal: ko.observable(availableMeals[0]) }; ko.applyBindings(viewModel); function formatPrice(price) { return price == 0 ? "Free" : "$" + price.toFixed(2); } </script> </body> </html>
1.可以直接绑定viewModel之外的变量。
2.data-bind标签内可以直接调用JavaScript方法。
标签:
原文地址:http://www.cnblogs.com/jsncz/p/5342189.html