学习汤姆大叔的knockout教程笔记

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习汤姆大叔的knockout教程笔记相关的知识，希望对你有一定的参考价值。

<!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教程笔记的主要内容，如果未能解决你的问题，请参考以下文章

读汤姆大叔《JavaScript变量对象》笔记

汤姆大叔的博客-menu

汤姆大叔的博客-高代码效率

深入理解JavaScript系列 --汤姆大叔

汤姆大叔JavaScript

汤姆大叔的博客-编程正例