Knockoutjsクイックスタート(クラシック)_基礎知識

Knockoutjs は、JavaScript で実装された MVVM フレームワークです。主に以下の機能があります:

1. 宣言型バインディング

2. オブザーバブルと依存関係の追跡

3. テンプレート化

フロントエンドのビジネス ロジックとビューを分離し、データ バインディング プロセスを簡素化することに大きな効果があります。早速、例を見てみましょう。VS を使用して開発する場合は、Nuget を使用してワンクリックで実行できます。

1. 基本的なバインディングと依存関係の追跡
最初に ViewModel を定義する必要があります:

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

この ViewModel を表示するために使用される View があります:

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

このビューから、宣言的バインディングの意味がわかります。ラベル上でのみ使用する必要があります。 data-bind 属性は、データの値を対応する場所にバインドできます。 View と ViewModel では、この 2 つを関連付けるコードが必要です:

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

ko.applyBindings(new ViewModel());

これらをまとめます。applyBinding コードは、ページが完全に読み込まれた後に実行する必要があることに注意してください。ページには次のように表示されます:

次に、オブザーバブルを見てみましょう。この関数は本来備わっているものではありません。メソッドは次のとおりです。

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

function ViewModel() {
this.firstName = ko.observable("Zixin");
this.lastName = ko .observable(" 陰");
}

この時点では、入力ボックスの値を変更する必要はありません。フォーカスが離れると、次のことがわかります。 p の値も変化します:

依存関係の追跡を見てみましょう。つまり、値が複数の値に依存し、値のいずれかが変更されると、その値は自動的に変更されます。これは計算メソッドによって実現されます。コードは次のとおりです。 🎜>

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

function ViewModel() {

this. firstName = ko.observable("Zixin" );
this.lastName = ko.observable("陰");
this.fullName = ko.computed(function () { return this.lastName() " " this.firstName(); },this );
}


オブザーバブルの値の取得は関数呼び出しであることに注意してください。このようにして、姓または名が変更されると、それに応じて fullName も自動的に変更されます。

コードを通じてオブザーバブルの値を変更することもでき、ページが自動的に更新されます。

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

function ViewModel() {

//………
this.capitalizeLastName = function () {
this.lastName(this.lastName() .toUpperCase());
}
}


ページにボタンを追加します:

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

大文字

ボタンをクリックすると、ビューモデルの CapitalizeLastName メソッドが起動され、オブザーバブルの値を変更する方法は、新しい値を関数呼び出しのパラメーターとして使用することです。クリック後:

2. リストバインディング

次の順序の ViewModel に参加し、observableArray を使用して配列内の変更を追跡します。

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

var products=[{name: "Thinkpad X1", 価格:9000},
{名前:"Hp ProBook",価格:5555},
{名前:"マウス",価格:45} ];

関数 Order() {
var self = this;
self.items = ko.observableArray([
//このデータはサーバーからロードされる必要があります
new Items(products[0], 1),
new item(products [1],2)]);
self.price = ko.computed(function () {
var p=0;
for (var i = 0; i var item = self.items()[i];
p = item.product.price * item.amount();
return p ;
}, self);
}

Order の項目は、実際には次のように定義されます。

コードをコピー

コードは次のとおりです。function item(product, amount) { var self = this; >this.product = product;

this.amount = ko.observable(amount);

this.subTotal = ko.computed(function () {
return self.amount() * self.product. Price;
}, self );
}


ViewModel の準備ができたら、View を実装できます。今回は、次のように foreach バインディングを使用する必要があります:

コードをコピーします

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

;td>価格

>

注文価格:

🎜>

次のような基本的な注文ページがあり、数量を選択すると価格が自動的に更新されると便利です。




次に、注文に商品を追加および削除する機能を追加します。まず、次のメソッドを注文に追加します。

コードをコピーします

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

function Order() {

//…… self.remove = function (item) { self.items.remove (アイテム); } self.addMouse = function () { self.items.push(new Items(products[2],1)); }

テーブルに列削除ボタンを追加します
:




コードをコピーします


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

Remove

再度、表の下部に商品を追加するボタンを追加します: コードをコピー

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

< ;button data-bind="click: addMouse">マウスを追加
この時点で、observableArray の機能が反映され、削除ボタンまたは下部のボタンをクリックすると、DOM ノードを手動で更新する必要がなく、ページ ノードがそれに応じて変更されます。これにより、フロント ノードが大幅に簡素化されます。 JSを終了します。