knockoutJS学習ノート03:knockout概要

通常、フロントエンドのメンテナンスは難しいですが、特にスクリプトでは、jqueryのようなライブラリは多くのコードを減らすのに役立ちますが、少し複雑な場合、多くのコードが生成されます.前回はテンプレートエンジンjsRenderについて説明しましたが、htmlを迅速に生成し、コードの作成を減らし、コードの読み取り性とメンテナンス性を強化することができます.しかし、最後に言ったように、それはまだ強くありません.
一、mvvm
mvvmといえば、以前習ったwpfを思い浮かべますが、普通に勉強していますが...、winformと比べると、wpfには良いデザインやアイデアがたくさんあり、ラベルコントロール、データ駆動、依存属性....さらに重要なのは、データを核心とし、データによってUIを駆動することです.通常、データはプログラム全体で核心的な地位を占めており、UIではなくデータを操作したいと考えています.
最も簡単なシーンとして、5つのinput textがあり、バックグラウンドからデータを取得して値を割り当て、これらの値を変更してバックグラウンドに再送信する必要があります.付与:$(".class 1").val(data1);$(".class2").val(data2);.... 取得値:var data 1=$(".class 1").val();var data2 = $(".class2").val();.... 操作が多くなると、このようなプロセスは依然として煩雑であることがわかります.
mvvmは、モデル-ビュー-ビューモデルと解釈されるユーザーインタフェースを作成する設計モードです.この3つの役割は、次のとおりです.
モデル:ビジネス分野のオブジェクトとデータ操作を表します.
≪ビュー|View|emdw≫:データとインタラクティブなUIを表示します.
≪ビュー・モデル|View Model|emdw≫:ビューに関連するすべてのデータと可視化されたビジネス・ロジックが含まれます.通常、我々のモデルはUIに対応するとは限らない.つまり、モデルは加工と処理を必要とし、展示に使用される.ビューモデルはこの役割を果たし、モデルをUIに適したモデルに処理する.
ここで例を挙げます.ページには、変更と削除の2つの操作を含むユーザ情報を表示するリストがあります.
ビュー:私たちに描かれています.
モデル:personエンティティオブジェクトと、変更、削除の2つの操作.
≪ビュー|View|emdw≫:モデル:2つの操作の変更と削除を含むビュー・バインディング用のpersonリスト.
ui操作の変更を例にとると、view-modelでの変更操作がトリガーされ、この操作はmodelでの変更操作を呼び出します.
二、knockout
knockout(koと略称)はmvvmフロントエンドフレームである.
公式サイトの紹介を参照:koは優れたJavaScriptライブラリで、明確で清潔な最下位データモデル(data model)だけでテキストに富み、表示と編集機能に優れたユーザーインタフェースを作成することができます.ローカルUIコンテンツの自動更新(ユーザーの動作に依存する変更や外部のデータソースの変更など)が必要な場合は、koは簡単に実現でき、メンテナンスが容易です.
簡単に言えば、koを使うとuiと私たちのデータがバインドされ、双方向バインドされます.上記の5つのinput textの例では、domを操作することなく、付与または値取得操作を実現することができます.
ブラウザの互換性の問題.マイクロソフトが開発したもので、すべての主流ブラウザに互換性があり、低バージョンieにも互換性があります.
koとjquery.両者自体は衝突せず、完全に協力して使用することができます.例えばデータ面ではko,アニメーション面ではjqueryを用いる.
三、簡単な例
そんなにたくさんの文字を書いて、簡単な例を見てみましょう.ダウンロードko.js、コードは以下のように、データバインドが簡単に完了することがわかります.
　　html:

name:<input type="text" data-bind="value:name" />,age:<input type="text" data-bind="value:age" />
name:<span data-bind="text:name"></span>

　　js:

    function Person(name,age){
　　　　this.name = ko.observable(name);
　　　　this.age = ko.observable(age);
　　}
　　var person = new Person("tom",18);
　　ko.applyBindings(person);

四、まとめ
mvvmの概念を理解することはkoを学ぶ上で非常に重要である.次はkoに関する文法の勉強を始めます.