建站
咨詢
售后
建站咨詢
新聞中心
1 Hello world
這個(gè)例子里，2個(gè)輸入框都被綁定到data model上的observable變量上。“full name”顯示的是一個(gè)dependent observable，它的值是前面2個(gè)輸入框的值合并一起的結(jié)果。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、托里網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、托里網(wǎng)絡(luò)營銷、托里企業(yè)策劃、托里品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供托里建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
無論哪個(gè)輸入框更新，都會(huì)看到“full name” 顯示結(jié)果都會(huì)自動(dòng)更新。查看HTML源代碼可以看到我們不需要聲明onchange事件。Knockout知道什么時(shí)候該更新UI。
代碼: View
First name:
Last name:
Hello, !
代碼: 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 work2 Click counter
這個(gè)例子展示的創(chuàng)建一個(gè)view model并且綁定各種綁定到HTML元素標(biāo)記上，以便展示和修改view model的狀態(tài)。
Knockout根據(jù)依賴項(xiàng)。在內(nèi)部，hasClickedTooManyTimes在numberOfClicks上有個(gè)訂閱，以便當(dāng)numberOfClicks改變的時(shí)候，強(qiáng)制hasClickedTooManyTimes重新執(zhí)行。相似的，UI界面上多個(gè)地方引用hasClickedTooManyTimes，所以當(dāng)hasClickedTooManyTimes 改變的時(shí)候，也講導(dǎo)致UI界面更新。
不需要手工聲明或者訂閱這些subscription訂閱，他們由KO框架自己創(chuàng)建和銷毀。參考如下代碼實(shí)現(xiàn)：
代碼: View
You've clicked times
That's too many clicks! Please stop before you wear out your fingers.
代碼: 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
這個(gè)例子展示的是綁定到數(shù)組上。
注意到，只有當(dāng)你在輸入框里輸入一些值的時(shí)候，Add按鈕才可用。參考下面的HTML代碼是如何使用enable 綁定。
代碼: View
代碼: 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
這個(gè)例子是在上個(gè)例子的基礎(chǔ)上添加remove item功能（multi-selection）和排序功能。 “remove”和“sort”按鈕在不能用的時(shí)候會(huì)變成disabled狀態(tài)（例如，沒有足夠的item來排序）。
參考HTML代碼是如何實(shí)現(xiàn)這些功能的，另外這個(gè)例子也展示了如何使用匿名函數(shù)來實(shí)現(xiàn)排序。
代碼: View
Your values:
代碼: 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());
新聞標(biāo)題：創(chuàng)新互聯(lián)Knockout教程：簡(jiǎn)單應(yīng)用舉例（1）
轉(zhuǎn)載來源：http://fisionsoft.com.cn/article/ccesddp.html
