建站
咨詢
售后
建站咨詢
新聞中心
5 Control types
這個(gè)例子，對(duì)view model沒(méi)有什么特殊的展示，只是展示如何綁定到各種元素上（例如，select， radio button等）。
創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都定制網(wǎng)頁(yè)設(shè)計(jì)方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及成都垃圾桶等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。
代碼: View
What's in the model?
Text value:
Password:
Bool value:
Selected option:
Multi-selected options:
Radio button selection:
HTML controls
Text value (updates on change):
Text value (updates on keystroke):
Text value (multi-line):
Password:
Checkbox:
Drop-down list:
Multi-select drop-down list:
Radio buttons:
代碼: View model
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);6 Templating
這個(gè)例子展示的render模板，以及在模板內(nèi)部如何使用data binding屬性的。
Template很容易嵌套，當(dāng)任何依賴數(shù)據(jù)改變的時(shí)候，Knockout會(huì)自動(dòng)重新render模板。參考演示（啟用‘Show render times’），Knockout知道只需要重新render改變的那些數(shù)據(jù)所綁定的最近的模板。
代碼: View
代碼: View model
// Define a "person" class that tracks its own name and children, and has a method to add a new child
var person = function (name, children) {
this.name = name;
this.children = ko.observableArray(children);
this.addChild = function () {
this.children.push("New child");
} .bind(this);
}
// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
people: [
new person("Annabelle", ["Arnie", "Anders", "Apple"]),
new person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
new person("Charles", ["Cayenne", "Cleopatra"])
],
showRenderTimes: ko.observable(false)
};
ko.applyBindings(viewModel);7 Paged grid
data-bind="..."綁定（像text, visible, 和click不是固定死的） - 你可以很容易自定義自己的綁定。如果你的自定義綁定僅僅是添加事件或者更新DOM元素的屬性，那幾行就可以實(shí)現(xiàn)。不過(guò)，你依然可以自定義可以重用的綁定（或插件），就行本例的simpleGrid綁定。
如果一個(gè)插件需要自己標(biāo)準(zhǔn)的view model（例如本例的ko.simpleGrid.viewModel ），它提供既提供了該如何配置插件實(shí)例（分頁(yè)大小，列聲明）工作，也提供了view model上的屬性是否是observable 的（例如currentpage索引）。也可以擴(kuò)展代碼讓這些屬性很容易地改變，并且讓UI自動(dòng)更新。例如，“Jump to first page”按鈕的工作原理。
查看HTML源代碼可以看到非常容易使用這個(gè)simple grid插件。simpleGrid源碼地址是：http://knockoutjs.com/examples/resources/knockout.simpleGrid.js
代碼: View
代碼: View model
var myModel = {
items: ko.observableArray([
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
]),
sortByName: function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
}
};
myModel.gridViewModel = new ko.simpleGrid.viewModel({
data: myModel.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
ko.applyBindings(myModel);8 Animated transitions
該例子展示了2種方式實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果：
當(dāng)使用template/foreach綁定的時(shí)候，你可以使用afterAdd和beforeRemove回調(diào)函數(shù)，他們可以讓你寫(xiě)代碼真實(shí)操作添加和刪除元素，這樣你就可以使用像jQuery的 slideUp/slideDown()這樣的動(dòng)畫(huà)效果。在planet types之間切換或添加新的planet可以看到效果。
通過(guò)observable 類型的值，我們不難定義自己的Knockout綁定，查看HTML源代碼可以看到一個(gè)自定義綁定fadeVisible，不管什么時(shí)候它改變了， jQuery就會(huì)在相關(guān)的元素上執(zhí)行fadeIn/fadeOut動(dòng)畫(huà)效果。點(diǎn)擊“advanced options” checkbox 可以看到效果。
代碼: View
Planets
Show:
代碼: View model
var viewModel = {
planets: ko.observableArray([
{ name: "Mercury", type: "rock" },
{ name: "Venus", type: "rock" },
{ name: "Earth", type: "rock" },
{ name: "Mars", type: "rock" },
{ name: "Jupiter", type: "gasgiant" },
{ name: "Saturn", type: "gasgiant" },
{ name: "Uranus", type: "gasgiant" },
{ name: "Neptune", type: "gasgiant" },
{ name: "Pluto", type: "rock" }
]),
typeToShow: ko.observable("all"),
displayAdvancedOptions: ko.observable(false),
addPlanet: function (type) { this.planets.push({ name: "New planet", type: type }); }
};
viewModel.planetsToShow = ko.dependentObservable(function () {
// Represents a filtered list of planets
// i.e., only those matching the "typeToShow" condition
var desiredType = this.typeToShow();
if (desiredType == "all")
return this.planets();
return ko.utils.arrayFilter(this.planets(), function (planet) {
return planet.type == desiredType;
});
} .bind(viewModel));
// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility library
ko.bindingHandlers.fadeVisible = {
init: function (element, valueAccessor) {
// Initially set the element to be instantly visible/hidden depending on the value
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
// Use "unwrapObservable" so we can handle values that may or may not be observable
},
update: function (element, valueAccessor) {
// Whenever the value subsequently changes, slowly fade the element in or out
var value = valueAccessor();
ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
}
};
ko.applyBindings(viewModel);分享標(biāo)題：創(chuàng)新互聯(lián)Knockout教程：簡(jiǎn)單應(yīng)用舉例（2）
當(dāng)前地址：http://www.dlmjj.cn/article/codsddd.html
