標籤：
<!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方法。
學習湯姆大叔的knockout教程筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
