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

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 メソッドで使用できます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。