Knockout应用开发指南一
来源:互联网 发布:c程序编写软件 编辑:程序博客网 时间:2024/05/29 07:36
简介
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
使用方法
让我们来看一个例子
想想在一个页面上,航空旅客可以为他们的旅行升级高级食物套餐,当他们选择一个套餐的时候,页面立即显示套餐的描述和价格。首先,声明可用的套餐:
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成如下的样子:
响应选择
下一步,声明一个简单的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>
于是,套餐信息和价格,将根据用户选择不同的套餐项而自动更新:
- Knockout应用开发指南一
- Knockout应用开发指南
- Knockout应用开发指南 第一章:入门
- Knockout应用开发指南 持续更新中
- Knockout应用开发指南之入门介绍
- Knockout应用开发指南(完整版) 目录索引
- Knockout应用开发指南(完整版) 目录索引
- Knockout应用开发指南 第一章:入门
- Knockout应用开发指南(完整版) 目录索引
- Knockout应用开发指南(完整版) 目录索引
- Knockout应用开发指南 第一章:入门
- Knockout应用开发指南 第一章:入门
- Knockout应用开发指南(完整版) 目录索引
- Knockout应用开发指南 第一章:入门
- Knockout应用开发指南 第九章:高级应用举例
- Knockout应用开发指南 第九章:高级应用举例
- Knockout应用开发指南 第九章:高级应用举例
- Knockout应用开发指南 第二章:监控属性(Observables)
- 将python字符串转化成长表达式的函数eval
- Kafka源码分析(6)
- 算法:经典leetcode算法题解
- iOS状态栏修改
- adb命令与monkey压力测试
- Knockout应用开发指南一
- 京东价格监控软件开发技术探讨六:京东商品价格详议
- (Rails) : NoMethodError: undefined method cost' for BCrypt::Engine:Class
- CSS文字单位
- (第4讲)Java集合分类
- 计蒜客 搜狗输入法的分词算法(模拟 字符串)
- 白话Spring(中级篇)---拦截器(下)
- git的基本命令
- C++实现矩阵类型的基本操作:创建矩阵(M x N)、释放内存、获取某一元素的值、修改某一元素的值、乘法操作