ko knockoutjs動(dòng)態(tài)屬性綁定技巧應(yīng)用
更新時(shí)間：2012年11月14日 11:27:20 作者：
ko的動(dòng)態(tài)屬性是指，ViewModel不確定的屬性，而后期卻需要的屬性,本文將詳細(xì)介紹，需要的朋友參考下
knockoutjs 簡稱 ko
ko的動(dòng)態(tài)屬性是指，ViewModel不確定的屬性，而后期卻需要的屬性。
什么是不確定屬性，比如ListModel如果 編輯某一項(xiàng)，想把這一項(xiàng)的狀態(tài)變更為Edit。數(shù)據(jù)并不包括Edit屬性，mvvm綁定時(shí)，會(huì)發(fā)現(xiàn)報(bào)錯(cuò)。
那么一定需要拓展ko才能達(dá)到我們的目的。
首先來認(rèn)識(shí)有值屬性綁定，和 無值屬性綁定：
一、有值屬性綁定：
JS模型:
$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable(1);
};
ko.applyBindings(new viewModel());
});
UI綁定:
<div data-bind='text:text'></div>
呈現(xiàn)：
二、無值屬性綁定：
JS模型:
$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable();
};
ko.applyBindings(new viewModel());
});
當(dāng)然text是一般值類型，用法 和 有值屬性綁定一樣，如果非值類型，而屬性是一個(gè)對(duì)象，而需要使用with:
UI綁定:
<div data-bind='with:text'>
<div data-bind="text:property"></div>
</div>
三、動(dòng)態(tài)屬性綁定：
動(dòng)態(tài)屬性綁定，那么這個(gè)屬性本身不確定，沿用ko的方法是很難去實(shí)現(xiàn)，所以 需要進(jìn)行拓展。
JS拓展：
//霧里看花 Q:397386036
ko.bindingHandlers.ext = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor());
for (var handler in value) {
if (value.hasOwnProperty(handler)) {
if (typeof viewModel[value[handler]] == 'undefined') {
viewModel[value[handler]] = ko.observable();
}
ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; });
}
}
}
};
JS模型：
$(function () {
var viewModel = function () {
};
ko.applyBindings(new viewModel());
});
UI綁定：
<div data-bind="ext:{text: 'text'}"></div>
<!--事件 便于 測(cè)試-->
<a href="javascript:void(0)" data-bind="click:function(){$data.text(1);}">更改text值</a>
ext中，第一個(gè)text是ko text方法，第二個(gè)text必須是字符串，是context/viewModel的屬性。所以ext的動(dòng)態(tài)屬性，可以使用于任何ko方法，比如ext:{text:'text', value:'text'}
呈現(xiàn)：
ko的動(dòng)態(tài)屬性是指，ViewModel不確定的屬性，而后期卻需要的屬性。
什么是不確定屬性，比如ListModel如果 編輯某一項(xiàng)，想把這一項(xiàng)的狀態(tài)變更為Edit。數(shù)據(jù)并不包括Edit屬性，mvvm綁定時(shí)，會(huì)發(fā)現(xiàn)報(bào)錯(cuò)。
那么一定需要拓展ko才能達(dá)到我們的目的。
首先來認(rèn)識(shí)有值屬性綁定，和 無值屬性綁定：
一、有值屬性綁定：
JS模型:
復(fù)制代碼 代碼如下:
$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable(1);
};
ko.applyBindings(new viewModel());
});
UI綁定:
復(fù)制代碼 代碼如下:
<div data-bind='text:text'></div>
呈現(xiàn)：
二、無值屬性綁定：
JS模型:
復(fù)制代碼 代碼如下:
$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable();
};
ko.applyBindings(new viewModel());
});
當(dāng)然text是一般值類型，用法 和 有值屬性綁定一樣，如果非值類型，而屬性是一個(gè)對(duì)象，而需要使用with:
UI綁定:
復(fù)制代碼 代碼如下:
<div data-bind='with:text'>
<div data-bind="text:property"></div>
</div>
三、動(dòng)態(tài)屬性綁定：
動(dòng)態(tài)屬性綁定，那么這個(gè)屬性本身不確定，沿用ko的方法是很難去實(shí)現(xiàn)，所以 需要進(jìn)行拓展。
JS拓展：
復(fù)制代碼 代碼如下:
//霧里看花 Q:397386036
ko.bindingHandlers.ext = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor());
for (var handler in value) {
if (value.hasOwnProperty(handler)) {
if (typeof viewModel[value[handler]] == 'undefined') {
viewModel[value[handler]] = ko.observable();
}
ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; });
}
}
}
};
JS模型：
復(fù)制代碼 代碼如下:
$(function () {
var viewModel = function () {
};
ko.applyBindings(new viewModel());
});
UI綁定：
復(fù)制代碼 代碼如下:
<div data-bind="ext:{text: 'text'}"></div>
<!--事件 便于 測(cè)試-->
<a href="javascript:void(0)" data-bind="click:function(){$data.text(1);}">更改text值</a>
ext中，第一個(gè)text是ko text方法，第二個(gè)text必須是字符串，是context/viewModel的屬性。所以ext的動(dòng)態(tài)屬性，可以使用于任何ko方法，比如ext:{text:'text', value:'text'}
呈現(xiàn)：
您可能感興趣的文章:
- KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定
- KnockoutJS 3.X API 第四章之表單value綁定
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】
- Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解
- Knockoutjs快速入門(經(jīng)典)
- Knockoutjs的環(huán)境搭建教程
- KnockoutJS 3.X API 第四章之事件event綁定
相關(guān)文章
javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 工廠模式,結(jié)合實(shí)例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽實(shí)例
本文分享了基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽的實(shí)例代碼。小編認(rèn)為具很好的參考價(jià)值，感興趣的朋友可以看下2016-12-12
在本篇文章里小編給大家分享的是關(guān)于JS面試題中深拷貝的實(shí)現(xiàn)講解，需要的朋友們可以參考下。2020-05-05
鼠標(biāo)捕獲(setCapture)作用是將鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。這個(gè)對(duì)象會(huì)為當(dāng)前應(yīng)用程序或整個(gè)系統(tǒng)接收所有鼠標(biāo)事件。2010-03-03
JS 退出系統(tǒng)并跳轉(zhuǎn)到登錄界面的實(shí)現(xiàn)代碼
這篇文章介紹了退出系統(tǒng)后跳轉(zhuǎn)到登陸頁面的簡單JS代碼，有需要的朋友可以參考一下2013-06-06
小程序?qū)崿F(xiàn)自定義多層級(jí)單選和多選
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)自定義多層級(jí)單選和多選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
js 數(shù)組倒序排列的具體實(shí)現(xiàn)
有時(shí)候需要將數(shù)組類型變量內(nèi)的元素顛倒一下順序再輸出,本文就詳細(xì)的介紹一下,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了鏈表的原理及javascript定義與使用鏈表的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
javascript中for/in循環(huán)及使用技巧
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的，本篇文章給大家介紹javascript中for/in循環(huán)及使用技巧 ，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JS同源策略和跨域問題深入分析和解決,在Web開發(fā)中,跨域問題是一個(gè)常見且必須解決的難題,當(dāng)瀏覽器出于安全考慮限制不同源之間的資源交互時(shí),開發(fā)者需要掌握多種方案來繞過這些限制,需要的朋友可以參考下2025-02-02