NockoutJSをプレイした人なら誰でも、コンポーネントと呼ばれる強力な関数があることを知っており、このコンポーネントの素晴らしいことの1つは、次のような独自のViewModelとテンプレートがあることです。
ko.components.register（ 'message-editor'、{viewmodel：function（）{}、template： ""}）;明らかに、ViewModelは関数関数領域であり、テンプレートはテンプレート領域であり、コンポーネントはレジスタ関数を介してノックアウトに登録されます。以下の単純な関数を示しましょう。これは、現在の「入力」コンテンツの長さの長さを動的に表示することです。
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> <meta charset = "utf-8"/>> <スクリプトsrc = src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component： "message-editor"'> </div> <script = "text/javascript"> ko.components.register（ 'message-editor'、{viewmodel：function（params）{thistext = ko.observestable（paramserfextiable） ''）;}、Template： 'message：<input data-bind = "value：text"/>'+ '（length：<span data-bind = "text：text（）。このコードを詳しく見てください。現在のコンポーネントは、テンプレートテンプレートをHTMLのdivタグに挿入し、このテンプレートタグにはテキスト要素のバインディングもあり、この（テキスト（）。長さ）のデータソースもviewmodelのtextです。 。右。 。 。これら2つの統合により、最終的なHTMLは次のように表示されます。
次に、いくつかの数字をさりげなく入力し、マウスを移動します。現時点では、以下などの入力変更イベントがトリガーされます。
とてもクールではありませんか？ ？ ？もちろん、一部の人々は、入力がレンダリングされたときに少しデフォルト値を与えたらどうでしょうか？ ？ ？大丈夫ですか？もちろん、それも可能です。現時点では、デフォルトでデータバインドで値を割り当てることができますが、問題ありません。 。 。たとえば、以下は次のとおりです。
<body> <h4> 2番目のインスタンス、パスパラメーター</h4> <div data-bind = 'component：{name： "message-editor"、params：{initialtext： "hello、world！" }} '> </div> <script type = "text/javascript"> ko.components.register（' message-editor '、{viewmodel：function（params）{this.text = ko.observable（params && params.InitialText ||' '）;}、Template：' Message-bind '+ data-bind = "text：text（）。length"> </span>） '}）; ko.applybindings（）; </script> </body>上記のコードでは、コンポーネントのPARAMSオブジェクトに初期テキストプロパティを追加し、この時点でこの初期テキストをViewModelに動的に挿入してから、入力およびSPAN要素をデータバインドを介してこのViewModelのこのViewModelのテキスト監視プロパティをサブスクライブすることがわかります。現時点では、リアルタイムの更新操作が発生します。見てみるのが待ちきれません〜
1：問題分析
さて、上記のデモンストレーションを通じて、次の2つの問題を見つけたかもしれません。最初の問題は、それがとても強力であることです。登録している限り、ApplyBindingsを介してViewModelを適用する必要はありません。これは、ページのモジュール化が実現します。これは非常に便利です〜この問題は良いことです。 2番目の問題は、テンプレートテンプレートのコンテンツが「ハードコーディング」の形であるということです。つまり、100行や200行などのこのコンテンツがたくさんある場合、私たちは狂っていますか？ ？ ？どんなに能力があっても、1つずつスプライスすることはできません。たとえそれらをスプライスしても、メンテナンスコストが高すぎます。問題は、テンプレートコンテンツを動的にターンする方法です。 ？ ？たとえば、実際に見られるバイドゥライブラリのページ。 。 。下の図に示すように：
このページには、上記の3つの私が旋回したなど、多くのモジュールがあります。これら3つのモジュールには多くのHTMLが必要です~~~
2：テンプレートの動的獲得
通常、HTMLコンテンツを動的に取得するには2つの方法があります。 1つ目はrequirejsです。もちろん、そのようなJSを参照する必要があります。 2つ目は、テンプレートを書き換えることです。もちろん、この記事では、コンポーネントのLoadTemplate関数を書き換えて、DefaultLoader Loaderを置き換えることです。とても簡単ではありませんか？ ？ ？
1. LoadTemplateメソッドを書き直します
//ステップ1：LoadTemplateの書き換え方法var templatefromurloader = {loadtemplate：function（name、templateconfig、callback）{if（templateconfig.fromurl）{var fullurl = '/' + templateconfig.flomurl // {ko.components.defaultloader.loadtemplate（name、markupstring、callback）;}）;} else {callback（null）;}}; //元のデフォルトローダーを置き換えて、新しいTemplatefromurlloaderko.components.unshift（テンプレートフロムルロアデル）;2.たとえば、ハードコードを外部ファイルに入れます。たとえば、新しいfile.htmlファイルを作成しました。
3.コンポーネントを登録してから、次のようなテンプレートタグの外部ファイルパスを参照してください{fromurl： 'file.html'}
ko.components.register（ 'message-editor'、{viewmodel：function（params）{this.text = ko.observable（params && params.InitialText || ''）;}、Template：{fromurl： 'file.html'}、}）;さて、すべての機能は準備ができています。ページを閲覧して、どのように見えるかを見てみましょう。 ？ ？
最後に、素晴らしい仕事が行われました。それは正しいですか？次に、上記で紹介した「Baidu Library」の例に拡張できます。各モジュールのHTMLを別のファイルに配置できます。
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> <meta charset = "utf-8"/>> <スクリプトsrc = src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component：{name： "message-editor"、params：{initialtext： "hello !!!" }} '> </div> <script type = "text/javascript"> //ステップ1：loadtemplateメソッドの書き換えvar templatefromurlloader = {loadtemplate：function（name、templateconfig、callback）{if（templateconfig.fromurl）{varurl ='/'/'/'/'/'/'/'/'/'/'/'/'/'/'/'/外部ファイルコンテンツ$ .get（fullurl、function（markupstring）{ko.components.defaultloader.loadtemplate（name、markupstring、callback）;}）;} else {callback（null）;}}}; //元のデフォルトローダーを置き換え、新しいデフォルトローダーを置き換える外部ファイルコンテンツを動的に取得します。 TemplateFromurlloaderko.components.loaders.unshift（templatefromurlloader）; ko.components.register（ 'message-editor'、{viewmodel：function（params）{the.text = ko.observable（param＆＆params.initext | | ''）; }、}）; ko.applybindings（）; </script> </body> </html>上記は、コンポーネントのテンプレートデータソースの実装方法として、knockoutjsで外部ファイルを動的にロードする方法です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！