Front End Starter(2)knockout - Introduction and List
Follow the Doc Here
http://learn.knockoutjs.com/#/?tutorial=intro
1. Knockout - Introduction
Model-View-ViewModel (MVVM)
Binding the Value
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Sillycat";
this.lastName = "Carl";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Column Editable and Observable
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
function AppViewModel() {
this.firstName = ko.observable("Sillycat");
this.lastName = ko.observable("Carl");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Computed the Value
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
function AppViewModel() {
this.firstName = ko.observable("Carl");
this.lastName = ko.observable("Luo");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
Binding the Button Function
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<button data-bind="click: capitalizeLastName">Go caps</button>
function AppViewModel() {
this.firstName = ko.observable("Carl");
this.lastName = ko.observable("Luo");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
ko.applyBindings(new AppViewModel());
2. Knockout - Lists and Collections
Think in the JavaScript Way
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[1]),
new SeatReservation("Sillycat", self.availableMeals[2])
]);
}
ko.applyBindings(new ReservationsViewModel());
<h2>Your seat reservations</h2>
<table>
<thead>
<tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr>
</thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
Adding Items
<button data-bind="click: addSeat">Reserve another seat</button>
function ReservationsViewModel() {
var self = this;
…snip…
self.addSeat = function() {
self.seats.push(new SeatReservation("Kiko", self.availableMeals[0]));
}
}
Making the data editable
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
Formatting the Price
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: formattedPrice"></td>
</tr>
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
self.formattedPrice = ko.computed(function(){
var price = self.meal().price;
return price ? "$" + price.toFixed(2) : "None";
});
}
I really love this JS tool.
Remove Items
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: formattedPrice"></td>
<td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
</tr>
function ReservationsViewModel() {
var self = this;
…snip...
self.removeSeat = function(seat) {
self.seats.remove(seat)
}
}
Displaying a Total Surcharge
self.totalSurcharge = ko.computed(function() {
var total = 0;
for (var i = 0; i < self.seats().length; i++) {
total += self.seats()[i].meal().price;
}
return total;
});
<h3 data-bind="visible: totalSurcharge() > 0">
Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
Some Control of the Data Binding Column
<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
References:
http://knockoutjs.com/
http://www.cnblogs.com/tomxu/archive/2011/11/21/2257154.html
相关推荐
《深入理解knockout-amd-helpers:构建可复用的Knockout模块》 在JavaScript的世界里,AMD(Asynchronous Module Definition)模式已经成为一种流行的方式,用于组织和加载模块化代码,尤其在大型项目中,它能有效...
knockout-3.4.2下载 一直研究knockout有兴趣的朋友一起
【前端项目-knockout-bootstrap.zip】是一个包含使用Knockout.js和Bootstrap框架构建的前端项目的压缩包。这个项目主要是为了展示如何将Knockout.js的强数据绑定功能与Bootstrap的UI组件结合,以创建功能丰富的、...
《前端项目:Knockout-Dragdrop 深度解析》 在当今的Web开发领域,前端技术日新月异,交互体验成为了评判一个网站或应用优劣的重要标准。其中,拖放(Drag and Drop)功能是提升用户体验的常用手段之一。本文将深入...
knockout-3.3.0.min.js源碼文件,通過[removed][removed],就可以直接引用,用於數據綁定
2. 功能特性:knockout-sortable不仅支持基本的拖放排序,还提供了如禁用排序、自定义排序事件处理、设置排序标志等多种高级特性,满足复杂应用场景的需求。 3. 整合优势:通过knockout-sortable,开发者无需关心...
**前端项目-knockout-validation.zip** 是一个包含KnockoutJS验证插件的前端开发资源包,主要用于在基于KnockoutJS的项目中实现模型和属性的验证功能。KnockoutJS是一个流行的JavaScript库,它提供了MVVM(Model-...
《使用Knockout和Postbox实现前端项目中的组件通信》 在现代Web开发中,组件化已经成为构建大型、复杂应用的...在“前端项目-knockout-postbox”中,你将有机会亲身体验这种通信方式的魅力,并探索更多的实践可能性。
Knockout-UI, 在KnockoutJS上,一个基于富UI组件 用户界面是基于 Knockout 和 jQuery UI的UI组件的集合。这个项目的目标是集成一些有用的小部件,可以以由社区重用和扩展。我开始在 2010年月 中学习 Knockout,并...
**前端项目-knockout-paging.zip** 是一个包含前端分页功能实现的代码包,主要基于Knockout.js库进行开发。Knockout.js是一个轻量级的数据绑定库,它帮助开发者实现MVVM(Model-View-ViewModel)模式,使得前端界面...
**前端项目-knockout-delegated-events** 在前端开发中,事件处理是用户交互的核心部分。Knockout.js 是一个流行的 JavaScript MVVM(Model-View-ViewModel)库,它简化了数据绑定和DOM操作。然而,原生 Knockout....
用Knockout, Require, Director, jQuery, Sugar搭建的单页程序(SPA Single Page Application)框架。 标签:knockout
"knockout-master.zip" 是一个包含Knockout源代码的压缩文件,Knockout是一个流行的JavaScript库,专为构建富交互式的Web应用程序而设计。它利用MVVM(Model-View-ViewModel)模式,帮助开发者轻松地管理DOM元素与...
#g5-knockout-dot.js 带有 KnockoutJS 和 dot 模板的简单模块基础###设置安装包并将其用作组件的脚手架 git clone https://github.com/MajorLeagueBaseball/g5-knockout-dot.git npm install###服务器服务器...
简化动态JavaScript ui通过应用模型-视图-视图模型(MVVM) 声明式绑定 容易副DOM元素与模型数据使用一个简洁、易读的语法 自动UI刷新 当你的数据模型的状态发生变化时,你的UI自动更新 依赖跟踪 隐式地设置链模型数据...
**前端项目-knockout-pre-rendered** 这个前端项目的核心是使用Knockout.js库实现预渲染功能,旨在提高页面加载速度和用户体验。Knockout.js是一个轻量级、MVVM(Model-View-ViewModel)模式的JavaScript库,主要...
**前端项目-knockout-es5.zip** 这个压缩包文件包含了一个使用Knockout.js库的前端项目,该库是基于ECMAScript 5规范构建的。Knockout.js是一款轻量级、强大的MVVM(Model-View-ViewModel)JavaScript框架,它使得...
npm install --save knockout-jsx安装后, knockout-jsx支持多种类型的导入。ES6 import { registerJSXComponent } from 'knockout-jsx' ;普通JS const { registerJSXComponent } = require ( 'knockout-jsx' ) ;//...
bower install knockout-validation --save NuGet PM > Install-Package Knockout.Validation NPM npm install knockout.validation --save CDN cdnjs ...