Knockout应用开发指南 第八章:简单应用举例(1)
原文:Knockout应用开发指南 第八章:简单应用举例(1)
本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用Kncokout的快感。
1 Hello world
这个例子里,2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个dependent observable,它的值是前面2个输入框的值合并一起的结果。
无论哪个输入框更新,都会看到“full name” 显示结果都会自动更新。查看HTML源代码可以看到我们不需要声明onchange事件。Knockout知道什么时候该更新UI。
代码: View
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
代码: View model
// 这里是声明的view model
var viewModel = {
firstName: ko.observable("Planet"),
lastName: ko.observable("Earth")
};
viewModel.fullName = ko.dependentObservable(function () {
// Knockout tracks dependencies automatically.
//It knows that fullName depends on firstName and lastName,
//because these get called when evaluating fullName.
return viewModel.firstName() + " " + viewModel.lastName();
});
ko.applyBindings(viewModel); // This makes Knockout get to work
2 Click counter
这个例子展示的创建一个view model并且绑定各种绑定到HTML元素标记上,以便展示和修改view model的状态。
Knockout根据依赖项。在内部,hasClickedTooManyTimes在numberOfClicks上有个订阅,以便当numberOfClicks改变的时候,强制hasClickedTooManyTimes重新执行。相似的,UI界面上多个地方引用hasClickedTooManyTimes,所以当hasClickedTooManyTimes 改变的时候,也讲导致UI界面更新。
不需要手工声明或者订阅这些subscription订阅,他们由KO框架自己创建和销毁。参考如下代码实现:
代码: View
<div>You've clicked <span data-bind="text: numberOfClicks"> </span> times</div>
<button data-bind="click: registerClick, enable: !hasClickedTooManyTimes()">Click me</button>
<div data-bind="visible: hasClickedTooManyTimes">
That's too many clicks! Please stop before you wear out your fingers.
<button data-bind="click: function() { numberOfClicks(0) }">Reset clicks</button>
</div>
代码: View model
var clickCounterViewModel = function () {
this.numberOfClicks = ko.observable(0);
this.registerClick = function () {
this.numberOfClicks(this.numberOfClicks() + 1);
}
this.hasClickedTooManyTimes = ko.dependentObservable(function () {
return this.numberOfClicks() >= 3;
}, this);
};
ko.applyBindings(new clickCounterViewModel());
3 Simple list
这个例子展示的是绑定到数组上。
注意到,只有当你在输入框里输入一些值的时候,Add按钮才可用。参考下面的HTML代码是如何使用enable 绑定。
代码: View
<form data-bind="submit: addItem">
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
代码: View model
var viewModel = {};
viewModel.items = ko.observableArray(["Alpha", "Beta", "Gamma"]);
viewModel.itemToAdd = ko.observable("");
viewModel.addItem = function () {
if (viewModel.itemToAdd() != "") {
viewModel.items.push(viewModel.itemToAdd());
// Adds the item. Writing to the "items" observableArray causes any associated UI to update.
viewModel.itemToAdd("");
// Clears the text box, because it's bound to the "itemToAdd" observable
}
}
ko.applyBindings(viewModel);
4 Better list
这个例子是在上个例子的基础上添加remove item功能(multi-selection)和排序功能。 “remove”和“sort”按钮在不能用的时候会变成disabled状态(例如,没有足够的item来排序)。
参考HTML代码是如何实现这些功能的,另外这个例子也展示了如何使用匿名函数来实现排序。
代码: View
<form data-bind="submit:addItem">
Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>
<p>Your values:</p>
<select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
<button data-bind="click: function() { allItems.sort() }, enable: allItems().length > 1">Sort</button>
</div>
代码: View model
// In this example, betterListModel is a class, and the view model is an instance of it.
// See simpleList.html for an example of how to construct a view model without defining a class for it. Either technique works fine.
var betterListModel = function () {
this.itemToAdd = new ko.observable("");
this.allItems = new ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);
// Initial items
this.selectedItems = new ko.observableArray(["Ham"]);
// Initial selection
this.addItem = function () {
if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))
// Prevent blanks and duplicates
this.allItems.push(this.itemToAdd());
this.itemToAdd(""); // Clear the text box
}
this.removeSelected = function () {
this.allItems.removeAll(this.selectedItems());
this.selectedItems([]); // Clear selection
}
};
ko.applyBindings(new betterListModel());
最新文章
- 记一个mvn奇怪错误: Archive for required library: &#39;D:/mvn/repos/junit/junit/3.8.1/junit-3.8.1.jar&#39; in project &#39;xxx&#39; cannot be read or is not a valid ZIP file
- Linux 命令备忘录(CentOS 7)
- 关于ListView中notifyDataSetChanged()刷新数据不更新原因
- 前端之css、JavaScript和DOM
- Web上的支持的图片格式以及它们之间的区别
- android XMl 解析神奇xstream 五: 把复杂对象转换成 xml ,并写入SD卡中的xml文件
- Objective-C 【self的用法】
- php开源项目学习二次开发的计划
- C#,Java,C++中的finally关键字
- javascript AOP
- nginx新手入门
- [BZOJ1207] [HNOI2004] 打鼹鼠 (dp)
- [转][scrapy] CannotListenError: Couldn’t listen on [Errno 98] Address already in use.
- [Swift]LeetCode530. 二叉搜索树的最小绝对差 | Minimum Absolute Difference in BST
- linux_批量关闭进程
- 诶西,JavaScript学习记录。。。。。。
- every day a practice —— morning(6)
- LeetCode 题解之Goat Latin
- HTML常见元素及其属性总结
- OpenLayers 比较有用的对象和属性
热门文章
- leetcode先刷_Path Sum
- <;转载>;使用css让大图片不超过网页宽度
- ASP.NET - List<;>; 绑定 DropDownList
- 通过cl_dd_document来实现在ALV中输出标题头
- 使用BigDecimal来进行精确计算
- boost在windows下的编译(vs2010)
- VC++实现位图显示透明效果--实现原理
- ThinkPHP 3 的CURD管理用户信息 修改和删除
- 启动网页时候自己主动载入servlet假设不使用strus最经常使用的两种方式
- Swift - 滑块(UISlider)的用法