1。はじめに
この一連の記事では、ブートストラップが導入されました。詳細については、この記事を確認してください：「Bootstrap Introduction Tutorial」。最近のプロジェクト以来、フロントエンドはASP.NET MVC + KnockoutJS + Bootstrapによって作成されています。それで、私はこのシリーズを再び書き始めました。今日は、WebフロントエンドのMVVMフレームワークであるKnockoutjsを見てみましょう。
2。knockoutjsとは何ですか？
.NET開発に従事している人なら誰でも、MVVMフレームワークがWPFに統合されていることを知っている必要があるため、NockoutJSはWeb開発のMVVMフレームワークでもあります。簡単に言えば、MVVMの利点はページ表示コードから分離されているため、フロントエンドプロジェクトをより適切に維持できます。
以前は、Webページを書いたとき、JSコードとHTMLコードが混合され、コードは多数のDOMオブジェクトで満たされていました。このコード構造は非常に混乱しています。 MVVMフレームワークを使用すると、JSコードとHTMLコードを分割でき、データ操作パーツはより簡単です。対応するタグ属性にバインドするだけで、対応する構文（データバインド）を介して表示するだけで、開発速度が高速化されます。
KnockoutJSは、このようなMVVMフレームワークです。実際、フレームワークを呼び出す代わりに、MVVMクラスライブラリである必要があります。 MVVMフレームワークがないため、それは比較的「重い」概念であり、ルーティングなどの機能を含める必要があります。ただし、ノックアウトはありません。それに比べて、AngularJはより適切なMVVMフレームワークと呼ばれる必要があります。
KnockoutJSによって実装される主な機能は次のとおりです。
宣言的なバインディング：単純な構文を使用して、モデルデータをDOM要素に関連付けます。つまり、「データバインド」構文です
依存関係追跡：変換のモデルデータと共同データ間の関係を確立します。たとえば、製品の合計価格は、各製品アイテムの価格の合計です。現時点では、製品の合計価格と製品アイテムを使用して、依存関係追跡機能を使用して関係を確立できます。つまり、各商品アイテムの総価格の合計から派生しています。この関係は、KnockoutJSの計算された関数によって行われます。
自動UI更新：モデル状態が変更されると、UIインターフェイスが自動的に更新されます。これは、観察可能な関数によって行われます。
テンプレート：モデルデータの複雑なネスト可能なUIをすばやく書き込みます。 WPFのテンプレートの概念に似ています。
次に、特定の例を使用して、KnockoutJSの使用をすばやく把握します。
3。宣言的結合
KnockoutJSでデータバインド構文を使用してモデルデータをDOM要素にバインドする方法を見てみましょう。
1。一方向の結合
<！doctype html> <html> <head> <head> "viewport" content = "width = device-width"/> <title> demo1-one-way binding </titlway binding </title> <script> <script> <"text/javascript" src = "/uploads/rs/376/pbcx3e1z/kdot-3.4.0> <3.4.0.> <3.4.0 <！ - 一方向のバインディング - > <div> <p>名：<strong data-bind = "text：firstName"> </strong> </p> <p>姓：<strong data-bind = "text：lastName"> </strong> </p> <>名：<入力データバインド= "Value：FirstName"/> p> <p> <p> <p> <p> <p> <p> <p> <p> <p> /> </p> </div> <！ - このスクリプトは、実際のプロジェクトの対応するJSファイルに配置し、スクリプトタグ - > <！ - jsコードはビジネスロジックの部分であり、ビジネスロジックをHTMLコードから分離し、ビューコードをより簡潔にするためにビジネスロジックを分離する必要があります。 this.firstname = "tommy"; this.lastname = "li"; } ko.applybindings（new ViewModel（））; </script> </body> </html>
2。上記の例は、一方向の結合操作のみを完了します。つまり、上記の例では、入力タグの値を変更してフォーカスを離れると、上記の値が更新されないことがわかります。実際、KnockoutJSの自動更新関数は自動的に追加されず、対応する関数をサポートする必要があります。この関数は観察可能な関数です。双方向の結合の例を見てみましょう。
< src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> < lastName "> </strong> </p> <p>名：<入力データバインド="値：firstName "/> </p> <p>姓：<入力data-bind =" value：lastName "/> </p> </div> <script =" text/javascript "> function viewmodel（）{thisfirstname = ko.observable（"）; this.lastname = ko.observable（ "li"）; } ko.applybindings（new ViewModel（））; </script> </body> </html>4。追跡への依存
次に、KOで計算された関数を使用して依存関係追跡を完了する方法を見てみましょう。特定の例の実装コードは次のとおりです。
<！doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <pittatip> <pittupt> <pitted> <titted> <pittipting <> "titpence < src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> < lastName "> </strong> </p> <p>名：<入力データバインド="値：firstName "/> </p> <p>姓：<入力データバインド="値：lastName "/> </p> <p>フルネーム：<strong data-bind =" text：fullname "> </strong> <button data-bind =" </div> <script type = "text/javascript"> function viewmodel（）{this.firstname = ko.observable（ "tommy"）; this.lastname = ko.observable（ "li"）; // this.fullname = ko.computed（function（）{return this.firstname（） + "" + this.lastname（）;}、this）; //コードを介して観測可能の値を変更します。capitalizelastname= function（）{this.lastname（this.lastname（）。touppercase（））; }; } ko.applybindings（new ViewModel（））; </script> </body> </html>次に、宣言的な結合と依存関係を使用して複雑なポイントを追跡する例を見てみましょう。特定の例コードは次のとおりです。
<！Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <tittate src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <table> <thead> <tr> <td> name </td> <tdd> </td> <tbody data-bind = "foreach：iteach"> <tr> <td data-bind = "text：crowt.name"> </td> <td> <select data-bind = "options：[1,2,3,4,5,6]、値：額"> </select> </td> <td data-bind = "tex data-bind = "click：$ root.remove"> remove </a> </td> </tbor> </table> <h3>注文価格：<span data-bind = "text：span> </h3> <button data-bind =" click：addcomputer "> computer </button> <sught"> javascript "> dig"> dig ""> javascript "> dig ost" }、{name： "xiaomi note"、price：999}、{name： "Macro Notebook"、Price：4999}]; // class function order（）{var self = this; this.items = ko.observablearray（[new item（products [0]、1）、new Item（Products [1]、2）]）; //総注文価格this.price = ko.computed（function（）{var p = 0; for（var i = 0; i <self.items（）。length; i ++）{var item = self.items（）[i]; p+= item.product.price * item.amount（）;} return p;}、self）; this.remove = function（item）{self.items.remove（item）; }; this.addcomputer = function（）{self.items.push（new item（製品[2]、1））; }; } // lineアイテムクラス関数項目（製品、量）{var self = this; this.product = product; this.amount = ko.observable（額）; //合計ラインアイテム価格this.subtotal = ko.computed（function（）{return self.amount（） * self.product.price;}、self）; } ko.applybindings（new Order（））; </script> </body> </html>V.テンプレート
上記の例を読んだ後、実際にKO（Knockoutjsの略語）を始めるのは非常に簡単であると感じるべきです。その構文は非常に理解しやすいので、KOでのテンプレートの使用を見てみましょう。
<！doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titlate> <titlate> <scrupt </< type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <！ - テンプレートバインディング、divのコンテンツはペンセンペレートテンプレートのタグです - > <!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <strong data-bind = "text：age"> </strong> </p> </div> - > <div data-bind = "template： 'persontemplate'" "> </div> <script id =" persontemplate "type =" text/html "> <p> name：<strong data-bind =" tex age "> </strong> </p> </scrip> <script type =" text/javascript "> var viewmodel = {name：ko.observable（ 'tommy'）、age：ko.observable（28）、makeolder：function（）{this.age（this.age（） + 1）; }}; Ko.ApplyBindings（ViewModel）; </script> </body> </html> <！doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titlate> <titlate> <spruct type = "text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <h2> h2> 'persontemplate'、foreach：people} "> </div> <script type =" text/html "id =" persontemplate "> <h3 data-bind =" text：name "> </h3> <p> age：<span data-bind =" text：age "> </span> </p> </script =" "> javascript"> javascript "> this.people = [{name： 'tommy'、age：27}、{name： 'frank'、age：33}]; } ko.applybindings（new myviewmodel（））; </script> </body> </html>テンプレートの使用の詳細については、公式ドキュメントhttp：//knockoutjs.com/documentation/template-binding.htmlを参照してください。この記事では、2のテンプレートの使用のみをリストします。
6。概要
この時点で、Knockoutjsのクイックスタートの内容は終了しました。次の記事では、引き続きKOコンテンツを紹介します。次の記事の内容では、KOを使用して実際のプロジェクトを作成する方法を紹介します。お見逃しなく。