<!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方法。
时间： 2024-10-26 20:17:17