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());
转载于:https://www.cnblogs.com/lonelyxmas/p/4536145.html
Knockout应用开发指南 第八章:简单应用举例(1)相关推荐
- Knockout应用开发指南
第一章:入门 1.Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要 ...
- Knockout应用开发指南 第六章:加载或保存JSON数据
原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
- 驱动开发指南 第八章 汇编LED灯实验
<I.MX6U 嵌入式 x Linux 驱动开发指南 V1.6 6>第八章 汇编LED灯实验 正点原子[第二期]手把手教你学Linux之ARM(MX6U)裸机篇 视频 选集 时间 P6 第 ...
- Knockout中文开发指南(完整版API中文文档) 目录索引
推荐阅读:https://www.cnblogs.com/smallprogram/p/5976954.html http://www.cnblogs.com/xqin/tag/easyui/ 一.下 ...
- Vert.x Java开发指南——第八章 安全和访问控制
第八章 安全和访问控制 版权声明:本文为博主自主翻译,转载请标明出处. https://blog.csdn.net/elinespace/article/details/80663688 相应代码位于 ...
- Knockout应用开发指南(完整版) 目录索引
官网地址:http://www.cnblogs.com/TomXu/archive/2011/11/21/2256749.html 山姆大叔教程地址:http://www.cnblogs.com/To ...
- FleaPHP 开发指南
FleaPHP 开发指南提供了使用 FleaPHP 开发应用程序的各方面内容.开发指南中,大部分文章属于 Step by Step 的教程形式,少数文章深入描述 FleaPHP 的某些重要特征. 虽 ...
- 《GDAL源码剖析与开发指南》一一1.9 简单的调用
本节书摘来自异步社区出版社<GDAL源码剖析与开发指南>一书中的第1章,第1.9节,作者:李民录 更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.9 简单的调 ...
- 《Abaqus GUI程序开发指南(Python语言)》——第一章 概述1.1 简单插件实例——创建带孔板有限元模型...
本节书摘来自异步社区<Abaqus GUI程序开发指南(Python语言)>一书中的第1章,第1.1节,作者: 贾利勇 , 富琛阳子 , 贺高 , 周正光 更多章节内容可以访问云栖社区&q ...
最新文章
- 是什么让 Spring5 放弃了使用 Guava Cache?
- HTTP GET URL的最大长度
- GDCM:gdcm::Directory的测试程序
- POJ 1151 Atlantis 线段树+扫描线
- mysql语句表名大小写敏感_Mysql 表名大小写敏感
- C/C++对象的序列化
- python调用远程js_python和js交互调用的方法
- SpringBoot之idea打包以及启动jar包
- oracle 10g dg参数配置,Windows平台之Oracle10g DG配置
- 开发中的多线程ID检测工具(ESET_VC52_MCID)
- 每次遇到浏览器主页被篡改的问题,就特别气愤加头疼
- 制作启动U盘 —— 大白菜U盘启动盘制作工具V5.1
- 三星s8html查看器,拆解三星S8手机
- 翻转课堂学习总结集—2015级
- 爬虫入门到放弃系列07:js混淆、eval加密、字体加密三大反爬技术
- c++ 递归算法求全排列
- 企业人才测评结果的三种导向分析
- add_months用法解析
- very very good,Java面试宝典+Java核心知识集
- C# 实现打印机队列监控Win32_PrintJob,Win32_Printer