Knockout应用开发指南一

墨蓝 2022-07-28 04:10 173阅读 0赞

简介

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。

Knockout有如下4大重要概念：

*  **声明式绑定 (Declarative Bindings)：**使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

*  **UI界面自动刷新 (Automatic UI Refresh)：**当您的模型状态(model state)改变时，您的UI界面将自动更新。

*  **依赖跟踪 (Dependency Tracking)：**为转变和联合数据，在你的模型数据之间隐式建立关系。

*  **模板 (Templating)：**为您的模型数据快速编写复杂的可嵌套的UI。

简称：KO

官方网站：[http://knockoutjs.com][http_knockoutjs.com]

使用方法

**让我们来看一个例子**

想想在一个页面上，航空旅客可以为他们的旅行升级高级食物套餐，当他们选择一个套餐的时候，页面立即显示套餐的描述和价格。首先，声明可用的套餐:

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 }
      ];

如果想让这3个选项显示到页面上，我们可以绑定一个下拉菜单（例如：<select>元素）到这个数据上。例如：

<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'"></select>

启用Knockout并使你的绑定生效，在availableMeals变量声明之后添加如下代码：

var viewModel = {
        /* we'll populate this in a moment */
    };
    
    ko.applyBindings(viewModel); // Makes Knockout get to work
    // 注意：ko. applyBindings需要在上述HTML之后应用才有效

你可以在这个系列里将学习更多的view model 和 MVVM。现在你的页面将render成如下的样子：

![2011112109213277.png][]

**响应选择**

下一步，声明一个简单的data model来描述旅客已经选择的套餐，添加一个属性到当前的view model上：

var viewModel = {
        chosenMeal: ko.observable(availableMeals[0])
    };

ko.observable是什么？它是KO里的一个基础概念。UI可以监控（observe）它的值并且回应它的变化。这里我们设置chosenMeal是UI可以监控已经选择的套餐，并初始化它，使用availableMeal里的第一个值作为它的默认值（例如：Standard）。

让我们将chosenMeal 关联到下拉菜单上，仅仅是更新<select>的data-bind属性，告诉它让<select>元素的值读取/写入chosenMeal这个模型属性：

Chosen meal: <select data-bind="options: availableMeals,
                                    optionsText: 'mealName',
                                    value: chosenMeal"></select>

理论上说，我们现在可以读/写chosenMeal 属性了，但是我们不知道它的作用。让我们来显示已选择套餐的描述和价格：

<p>
        You've chosen:
        <b data-bind="text: chosenMeal().description"></b>
        (price: <span data-bind='text: chosenMeal().extraCost'></span>)
    </p>

于是，套餐信息和价格，将根据用户选择不同的套餐项而自动更新：

![2011112109232184.png][]

[  
][http_knockoutjs.com]

[http_knockoutjs.com]: http://knockoutjs.com/
[2011112109213277.png]: /images/20220727/e3fa85a049604c4bb4d8a7f4e58ab3b0.png
[2011112109232184.png]: /images/20220727/1c3e95fc37eb4cd6a31fe75d715fdc2b.png