kkkoutjs 動的属性バインディングスキル application_javascript スキル-jsチュートリアル-php.cn

kkkoutjs 動的属性バインディングスキル application_javascript スキル

WBOY

リリース： 2016-05-16 17:48:10

オリジナル

1595 人が閲覧しました

Knockoutjs は ko と略されます
Ko の動的属性は、ViewModel では不確実だが後で必要になる属性を指します。
不確実な属性とは何ですか? たとえば、ListModel が項目を編集する場合、この項目のステータスを編集に変更したいと考えます。データに Edit 属性が含まれていない場合、mvvm がバインドされるとエラーが報告されます。
それでは、目標を達成するために ko を拡張する必要があります。
まず、価値のある属性バインディングと価値のない属性バインディングを理解しましょう:
1. 価値のある属性バインディング:
JS モデル:

コードをコピーコードは次のとおりです。

 
$(function () { 
var viewModel = function () { 
var self = this ; 
self.text = ko.observable(1); 
ko.applyBindings(new viewModel()); 

 
 : 

コードをコピーコードは次のとおりです:

レンダリング:

2. 値のない属性バインディング
: JS モデル:

コードをコピーコードは次のとおりです。

$(function () {

var viewModel = function () { 
var self = this; 
ko.applyBindings(new viewModel()); ; 

 
もちろん、テキストは一般的な値型であり、それが非値型で属性がオブジェクトの場合、その使用法は次のようにする必要があります。使用条件: 
UI バインディング: 

コードをコピー

コードは次のとおりです:

3. 動的プロパティバインディング:

 動的属性バインディング、その場合、属性自体は ko メソッドを使用して実装するのが難しいため、拡張する必要があります。 
JS 展開: 

コードをコピー

コードは次のとおりです:

//探しています煙の中から Q:397386036 ko.bindingHandlers.ext = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var value = ko.utils.unwrapObservable(valueAccessor()) ; for (value の var ハンドラー) {

if (value.hasOwnProperty(handler)) {

if (typeof viewModel[value[handler]] == '未定義') { 
viewModel[ value[ハンドラー ]] = ko.observable(); 
} 
ko.bindingHandlers[ハンドラー].update(element, function () { return viewModel[value[ハンドラー]]; }); 
 } 
} 
}; 

 
JS モデル: 




コードをコピー

コードは次のとおりです:

$(function () { var viewModel = function () { }; ko.applyBindings(new viewModel()); });

UI バインディング: 

 コードをコピー

コードは次のとおりです。

; テキスト値を変更 ext、最初のテキストは ko テキストメソッドで、2 番目のテキストは文字列である必要があり、context/viewModel の属性です。したがって、 ext の動的プロパティは、 ext:{text:'text', value:'text'} Present:

などの ko メソッドで使用できます。

kkkoutjs 動的属性バインディング スキル application_javascript スキル

kkkoutjs 動的属性バインディングスキル application_javascript スキル