ノックアウト入門ガイドと導入

クズども · 掲載地 2017/08/11 12:24:27

Knockout.jsって何?

Knockoutは素晴らしいJavascripライブラリです明確でクリーンな基礎データモデルだけで、優れた表示・編集機能を備えたテキスト豊富なユーザーインターフェースを作成するのに役立ちます。ローカルUIコンテンツを自動更新する必要がある場合(例えば、ユーザーの行動や外部データソースの変化に応じて)、KOは簡単に実装でき、メンテナンスも非常に簡単です。

KOの重要な特徴:

エレガントな依存関係追跡 - データソースモデルが変更されるたびに、UIの指定されたコンテンツを自動で更新できます。
宣言的バインディング - UIをデータソースモデルにシンプルにバインドし、任意のネスト構造テンプレートを使って複雑な動的インターフェースを作成できます。
良好なスケーラビリティ - カスタム振る舞いは、数行の簡単なコードで新しい宣言としてバインドできます。
その他の利点:

Pure Javascrip{filtering}tライブラリ - あらゆるサーバーおよびクライアント技術に対応しています。
既存のアプリケーションにも適用可能で、プログラムのメインアーキテクチャを変更する必要はありません。
シンプルさ - Gzip圧縮後はわずか13Kです。
主要なブラウザ(IE 6+、Firefox 2+、Chrome、Safariなど)に対応しています。
包括的な仕様セット(行動駆動型開発付き)――つまり、新しいブラウザやプラットフォームで簡単に検証できるということです。
Ruby on Rails、Asp.net MVC、その他のMVC技術に詳しい開発者は、これを宣言型構文を持つMVCリアルタイム形式と見なすかもしれません。言い換えれば、KOはJSONデータを編集してUIユーザーインターフェースを作る方法と考えることができます... それがあなたに何をもたらすかを。

使い方は?

最も早く楽しいスタート方法はインタラクティブな指導で、基本的なテクニックを習得し、各オンラインインスタンスを習得すれば、プロジェクトに取りかかる準備が整います。

KOとJquery(プロトタイプなど)は競合しているのでしょうか、それとも一緒に使うことは可能ですか?

みんなJqueryが大好きです! 過去には、さまざまな一貫性のないDOMオブジェクト操作API手法に耐えなければなりませんでしたが、Jqueryの登場は過去の扱いにくいフレームワークに対する優れた代替手段となり、柔軟で使いやすいものとなりました。 Jqueryはウェブページの要素操作やイベント処理に優れて使いやすいですが、KOは別の問題を解決します。

もしUIインターフェースが少し複雑で似た挙動を含んでいる場合、Jqueryだけを使うとUIは思ったよりも複雑で難しく、メンテナンスもかなりコストがかかります。例えば、テーブルにアイテムのリストを表示し、リストの数を表示し、アイテムリストの数が5未満の場合は「追加」ボタンを有効にする場合、それ以外は無効にする例を考えてみましょう。 Jqueryには基本的なデータモデルの概念がないので、プロジェクトリストの数を知りたい場合は、テーブル/tr/divの数値から推論する必要があります。特定のSPANSでデータ量を表示する必要がある場合は、新しいデータを追加する際にSPANのテキストも更新することを忘れないでください。もちろん、合計数が>=5になった場合は追加ボタンを無効にすることも覚えておく必要があります。次に、Delete関数を実装したい場合は、クリック後にどのDOM要素を変更したいかを指定する必要があります。

ノックアウトでやるのはどう違うのですか?

KOではすべてが非常にシンプルになります。これにより、データの不整合を気にせずにプロジェクトの複雑さを簡単にスケールできます。単にデータをJavascrip{filter}t配列に変換し、foreachを使ってそのデータ配列をテーブルやページ内のdivの集合にバインドします。データ配列が変更されると、UIが自動的に対応します(新しい行の挿入方法や場所を指定する必要はありません)。あとはUIのデータ同期です。例えば、以下のSPANを宣言してデータ量を表示できます:

ログインが見えます。

それです！更新のためにコードを書く必要はありません。更新はmyItems配列の変更に依存します。同様に、追加ボタンの有効化・無効化は配列myItemsの長さによって決まり、以下の通りです。

ログインが見えます。

その後、「Delete」機能の実装が必要な場合は、UI要素の操作方法を指定する必要はなく、データモデルを修正するだけで大丈夫です。

まとめ:KOはjQueryや他の類似のDOM操作フレームワークと競合する意図はありません。 KOはデータモデルとユーザーUIインターフェースを高レベルで関連付ける方法を提供します。KOはjQuery自体に依存しませんが、jQueryを組み合わせて使うことは可能です鮮やかで穏やかなUI変更にはjQueryの使用が必要です。

リソース：

http://www.aizhengli.com/knockoutjs/50/knockout.html

http://knockoutjs.com/

[その他] ノックアウト入門ガイドと導入

関連記事

閲覧したセクション