Geekly Articles each Day

フロント゚ンドテンプレヌト゚ンゞン

最埌の蚘事では、「自転車」「ラむト」フレヌムワヌクのフレヌムワヌク内のロヌダヌずテンプレヌト゚ンゞンの説明に専念したした。 運呜の意志により、いく぀かのプロゞェクトでテンプレヌト゚ンゞンを遞択し、スタンドアロンバヌゞョンにするこずを䜙儀なくされた䞀方で、倚くの新機胜を充実させたした。 これに぀いおは、フロント゚ンドテンプレヌト゚ンゞンに぀いお説明したす。

しかし、あなたの時間を節玄するために、最初にこの蚘事が面癜いかもしれない人を指定したす倚くの手玙があるので




このプロゞェクトはFlex.Patternsず呌ばれたすが、簡単にするために単にパタヌンず呌びたす。 以䞋は、簡単に自分自身を再珟できるいく぀かの䟋です。 前の蚘事で説明したFlexずは異なり、パタヌンは蚭定やタンバリンずのダンスを必芁ずしたせん-ピックアップしお䜿甚したす。 パタヌンは䞀般的に非垞にシンプルで、それが私の䞻な目暙でした。

たずえば、パタヌン内のテンプレヌトは単なるHTMLペヌゞであり、それ以䞊のものではありたせん。 EJSや他の倚くのテンプレヌト゚ンゞンで䜿甚されおいるような特定の構文はありたせん。

<ul> <% for(var i=0; i<supplies.length; i++) {%> <li><%= supplies[i] %></li> <% } %> </ul>


パタヌンの構文党䜓は、3぀の定矩に制限されおいたす。



テンプレヌトを䜜成



さお、䟋を芋おみたしょう。 ナヌザヌを認蚌するポップアップを䜜成したす。 4぀のテンプレヌトが必芁です。



以䞋はポップアップのテンプレヌトです。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="pattern.css" /> </head> <body> <div data-style="Popup" id="{{id}}"> <div data-style="Popup.Container"> <div data-style="Popup.Title"> <p data-style="Popup.Title">{{title}}</p> </div> <div data-style="Popup.Content">{{content}}</div> <div data-style="Popup.Bottom"> <p data-style="Popup.Bottom">{{bottom}}</p> </div> </div> </div> </body> </html>


すでにお気付きのように、これは最も䞀般的なHTMLファむルです。 HEADには、CSSファむルずJSファむルを含めるこずができたす。これらのファむルはテンプレヌトに自動的に含たれ、キャッシュされたす。

キャッシュはパタヌンの重芁な郚分です。 テンプレヌトHTMLずリ゜ヌスCSSおよびJSの䞡方がlocalStorageに保存されたす。぀たり、テンプレヌトを再利甚するず、すべおのデヌタがサヌバヌからではなくクラむアントから取埗され、レンダリング速床に最も有利に圱響したす。 さらに、パタヌン自䜓がキャッシュの関連性を監芖したす。パタヌンがすべおのパタヌンずそのリ゜ヌスのHEADERを芁求するたびに。 たた、䜕かが倉曎された堎合、パタヌンは独立しおキャッシュを曎新し、システム党䜓を最新の状態に保ちたす。 ただし、承認りィンドりに戻りたす。

レむアりトテンプレヌト以降、スペヌスを節玄するために、BODYタグのコンテンツのみを匕甚したす

 <div data-type="Pattern.Login"> <p>Login</p> {{login}} <p>Password</p> {{password}} <div data-type="Pattern.Controls">{{controls}}</div> </div>


テキストを入力するためのフィヌルドこの堎合、ナヌザヌ名ずパスワヌドになりたす

 <p>{{::value}}</p> <div data-type="TextInput.Wrapper"> <div data-type="TextInput.Container"> <input data-type="TextInput" type="{{type}}" value="{{::value}}" name="TestInput"/> </div> </div>


䞊蚘のラベル{{:: value}}を䜿甚しお、valueずいう倉数を介しおINPUT.valueずP.innerHTMLをリンクしたこずに泚意しおください。 したがっお、INPUTにテキストを入力するず、関連する段萜に衚瀺されたす。 さらに、䜜成された倀倉数がモデルに配眮されたす。

さお、承認りィンドりに必芁な最埌のテンプレヌトはボタンです。

  <a data-type="Buttons.Flat" id="{{id}}">{{title}}</a>


先に進む前に、予玄をしおください。 パタヌンが本栌的なHTMLファむルをテンプレヌトずしお䜿甚するずいう事実により、䜿甚されるペヌゞずは別にそれらを開く機䌚が䞎えられ、これにより、スタむルずロゞックある堎合を迅速にデバッグするこずが可胜になりたす。

テンプレヌトを添付する



テンプレヌトは、次の2぀の方法でペヌゞに添付レンダリングできたす。



どちらを䜿甚するかは、タスクのみに䟝存したす。 たずえば、ペヌゞを読み蟌んだ盎埌にテンプレヌトを描画する必芁がある堎合は、マヌクアップを介しお添付するこずをお勧めしたす。 承認テストりィンドりのようなものに぀いお話しおいる堎合は、JavaScriptを介した呌び出しがより適切です。 䞡方の方法を芋おみたしょう。

JavaScriptレンダリング



getメ゜ッドは、テンプレヌト-_patterns.getのレンダリングを担圓したす。テンプレヌトは、-renderメ゜ッドを介しおマりント指定されたノヌドにアタッチできるテンプレヌトクラスのむンスタンスを返したす。 以䞋の䟋を芋おください。すべおが明らかになりたす。

 var id = flex.unique(); _patterns.get({ url : '/patterns/popup/pattern.html', node : document.body, hooks : { id : id, title : 'Test dialog window', content : _patterns.get({ url : '/patterns/patterns/login/pattern.html', hooks : { login : _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'text', } }), password: _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'password', } }), controls: _patterns.get({ url : '/patterns/buttons/flat/pattern.html', hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }] }), } }) } }).render();


最も重芁なパラメヌタヌはURLです。ここで、テンプレヌトの取埗先を指定したす。 同様に重芁なパラメヌタヌはフックです。 テンプレヌトで、ラベル-{{name}}を通じおコン​​テンツの堎所を瀺したこずを思い出しおください。 hooksパラメヌタヌでは、そのような各タグのコンテンツを定矩したす。

_patterns.getメ゜ッドが取るすべおのパラメヌタヌの完党な説明は、 ここにありたす 。 そしお、この䟋の結果はここにありたす 。

しかし、先に進みたす。

HMTLマヌクアップを介したレンダリング



ペヌゞを読み蟌んだ盎埌に生成されたテンプレヌトが必芁な状況では、PATTERNタグを䜿甚しお、テンプレヌトをマヌクアップに盎接配眮できたす。

  <pattern src="/patterns/popup/pattern.html" style="display:none;"> <id>0</id> <title>Test dialog window</title> <content src="/patterns/patterns/login/pattern.html"> <login src="/patterns/controls/textinput/pattern.html"> <type>text</type> </login> <password src="/patterns/controls/textinput/pattern.html"> <type>password</type> </password> <controls src="/patterns/buttons/flat/pattern.html"> <id>login_button</id><title>login</title> <id>cancel_button</id><title>cancel</title> </controls> </content> </pattern>


この堎合、同じ名前のタグを䜿甚しおフックを識別したす。 ぀たり、以䞋の2぀の構成の意味は同じです。

 <pattern src="/patterns/popup/pattern.html" style="display:none;"> <id>0</id> <title>Test dialog window</title> ... </pattern> 


 _patterns.get({ url : '/patterns/popup/pattern.html', hooks : { id : 0, title : 'Test dialog window', ... } }).render();


ルヌトノヌドに察しおのみPATTERNタグを䜿甚し、ネストされたテンプレヌトがフックコンテンツずしお䜿甚されるこずを瀺すためにSCRプロパティを远加するだけであるこずに泚意しおください。

぀たり、次のマヌクアップは、パタヌンがSRCで指定されたアドレスでパタヌンを怜出し、「text」の倀にtype hookで適甚する必芁があるこずを意味したす。

 <login src="/patterns/controls/textinput/pattern.html"> <type>text</type> </login>


ここでは実際の䟋を芋るこずができたす。 ペヌゞの゜ヌスを開いお、JavaScript呌び出しがないこず、およびレンダリングに必芁なデヌタを含む元のペヌゞレむアりトにPATTERNタグが存圚するこずを確認したす。

パタヌンリピヌト



非垞に頻繁にパタヌンを繰り返し繰り返す必芁がありたす。 これの最も顕著な䟋は衚です。 䜜成するには、2぀のテンプレヌトが必芁です。

テヌブルテンプレヌト。

 <table data-type="Demo.Table"> <tr> <th>{{titles.column_0}}</th> <th>{{titles.column_1}}</th> <th>{{titles.column_2}}</th> <th>{{titles.column_3}}</th> </tr> {{rows}} </table>


そしお、テヌブル内の行パタヌン。

 <tr> <td>{{column_0}}</td> <td>{{column_1}}</td> <td>{{column_2}}</td> <td>{{column_3}}</td> </tr>


これらの2぀のテンプレヌトずデヌタがあれば、テヌブルを描画できたす。

 var data_source = []; for (var i = 0; i < 100; i += 1) { data_source.push({ column_0: (Math.random() * 1000).toFixed(4), column_1: (Math.random() * 1000).toFixed(4), column_2: (Math.random() * 1000).toFixed(4), column_3: (Math.random() * 1000).toFixed(4), }); } _patterns.get({ url: '/patterns/table/container/pattern.html', node: document.body, hooks: { titles: { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, rows: _patterns.get({ url: '/patterns/table/row/pattern.html', hooks: data_source, }) } }).render();


ここで実際の䟋を芋぀けるこずができたす。

したがっお、特定のパタヌンを数回繰り返すには、フックフックの倀をデヌタ配列ずしお枡すだけで十分です。 たた、お気づきかもしれたせんが、HTMLでテンプレヌトを定矩するずきにテンプレヌトを繰り返すために、以前に承認りィンドりのボタンで瀺したように、必芁な回数だけフック倀を繰り返したす。

 <controls src="/patterns/buttons/flat/pattern.html"> <id>login_button</id><title>login</title> <id>cancel_button</id><title>cancel</title> </controls>


たた、ヘッダヌのフックの名前はポむント{{titles.column_0}}を介しお定矩されおいるため、レンダリング関数で倀のより意味のある定矩を䜿甚できたす。 したがっお、すべおの芋出しはtitlesオブゞェクトで定矩されたす。

コントロヌラヌずコヌルバック関数



本質的に、パタヌンでは、コントロヌラヌずコヌルバック関数は同じものです。 唯䞀の違いは保管堎所です。

ご想像のずおり、コヌルバック関数はテンプレヌトのレンダリング時に定矩されたす。

 _patterns.get({ url : 'some_url', callbacks: { //Callback-function definition success: function (results) { var instance = this, dom = results.dom, model = results.model, binds = results.binds, map = results.map, resources = results.resources; ... } }, }).render();


ただし、コントロヌラヌを䜜成するには、次のコンテンツのJSファむルを䜜成する必芁がありたす

 _controller(function (results) { var instance = this, dom = results.dom, model = results.model, binds = results.binds, map = results.map, resources = results.resources; ... });


次に、テンプレヌトに添付するだけです。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="pattern.css" /> <!-- Attach controller of template --> <script type="text/javascript" src="conroller.js"></script> </head> <body> <div data-style="Popup"> <div data-style="Popup.Container"> <div data-style="Popup.Title"> <p data-style="Popup.Title">{{title}}</p> </div> <div data-style="Popup.Content">{{content}}</div> <div data-style="Popup.Bottom"> <p data-style="Popup.Bottom">{{bottom}}</p> </div> </div> </div> </body> </html>


これでコントロヌラヌの準備は完了です。 これで、テンプレヌトが描画された埌、コントロヌラヌ内で定矩されおいるすべおのものが毎回起動されたす。

ただし、最も興味深いのは結果オブゞェクトであり、コントロヌラヌずコヌルバック関数の䞡方に枡されたす。

モデルずコミュニケヌション



取埗する2぀の重芁なオブゞェクトは、モデルずバむンドです

 var model = results.model; var binds = results.binds;


䜕かがあるこずを瀺すために、テヌブル行のテンプレヌトを次のように倉曎したす。

 <tr> <td style="background:{{::background_0}};">{{column_0}}{{::column_0}}</td> <td style="background:{{::background_1}};">{{column_1}}{{::column_1}}</td> <td style="background:{{::background_2}};">{{column_2}}{{::column_2}}</td> <td style="background:{{::background_3}};">{{column_3}}{{::column_3}}</td> </tr>


ご芧のずおり、いく぀かのリンクを远加したした。 たず、各セルのbackgroundプロパティをbackground_n倉数にリンクしたした。 セル自䜓の倀に぀いおも同じこずを行い、それらを倉数column_nに関連付けたした。

これで、コントロヌラヌたたはコヌルバック関数で、ノヌドの関連プロパティにアクセスできたす。

 _patterns.get({ ... callbacks : { success: function (results) { (function (model) { var fun = function () { var r = Math.round(19 * Math.random()), c = Math.round(3 * Math.random()); model.__rows__[r]['column_' + c] = (Math.random() * 1000).toFixed(4); model.__rows__[r]['background_' + c] = 'rgb(' + Math.round(255 * Math.random()) + ', ' + Math.round(255 * Math.random()) + ', ' + Math.round(255 * Math.random()) + ')'; setTimeout(fun, Math.ceil(50 * Math.random())); }; fun(); }(results.model)); } } }).render();


ここでコむルから飛ばされたテヌブルを芋るこずができたす。

そのため、モデルオブゞェクトには関連する倀ぞのリンクが含たれおいたす。 __rows__プロパティに泚意しおください。 この__hook__コンストラクトにより、フックのネストレベルが瀺されたす。 デヌタはルヌトテンプレヌトテヌブルテンプレヌトに含たれおおらず、フック行に埋め蟌たれおいるため、モデル.__ rows__を介しおデヌタにアクセスできたす。 名前の競合に察する予防策ずしお二重䞋線が導入されおいたす。

芚えおいる堎合は、承認りィンドりテンプレヌトでINPUT.valueをP.innerHTMLにリンクしたした。 コヌルバック関数では、倀ぞの参照も取埗したす。

 _patterns.get({ url : '/patterns/popup/pattern.html', node : document.body, hooks : { id : id, title : 'Test dialog window', content : _patterns.get({ url : '/patterns/patterns/login/pattern.html', hooks : { login : _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'text', } }), password: _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'password', } }), controls: _patterns.get({ url : '/patterns/buttons/flat/pattern.html', hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }] }), } }) }, callbacks: { success: function (results) { var instance = this, model = results.model; model.__content__.__login__.value = 'this new login'; } }, }).render();


モデルは敎理されおいたすが、バむンドずは䜕ですか たた、その構造内のバむンドはモデルず同じですが、1぀の䟋倖がありたす-「最埌に」は倀ではなくメ゜ッドです。

 success: function (results) { var instance = this, dom = results.dom, binds = results.binds, id = null; //Add handle id = binds.__content__.__login__.value.addHandle(function (name, value) { var obj = this; }); //Remove handle binds.__content__.__login__.value.removeHandle(id); }


そしお、そのうちの2぀メ゜ッドしかありたせん。



ご想像のずおり、最初はむベントハンドラヌをアタッチし、2番目はむベントハンドラヌを削陀したす。 したがっお、モデルの䞀郚のプロパティに関数を「ハング」させるこずができ、このプロパティが倉曎されるたびにトリガヌされたす。

DOMずマップ



他の2぀の興味深いオブゞェクトは、DOMずマップです。

 var dom = results.dom; var map = results.map;


承認りィンドりのボタンテンプレヌトを少し倉曎しお、domオブゞェクトの機胜を瀺したす。

  <a data-type="Buttons.Flat" id="{{id}}" {{$button}}>{{title}}</a>


そこで、ボタンノヌドにリンク{{$ button}}を远加したした。 したがっお、このノヌドを操䜜するためのメ゜ッドのコレクションを䜜成するパタヌンに関連するノヌドに泚目したした。

 success: function (results) { var instance = this, dom = results.dom; dom.listed.__content__.__controls__[0].button.on('click', function () { alert('You cannot login. It\'s just test. Login is "' + model.__content__.__login__.value + '", and password is "' + model.__content__.__password__.value + '"'); }); dom.listed.__content__.__controls__[1].button.on('click', function () { alert('Do not close me, please.'); }); dom.grouped.__content__.__controls__.button.on('click', function () { alert('This is common handle for both buttons'); }); }


ご芧のずおり、フォヌムのボタンにむベントハンドラヌをアタッチする機䌚がありたした。 すぐに䜿甚できるすべおのメ゜ッドの完党なリストは、 ここにありたす 。 独自のメ゜ッドを远加する方法の説明もありたす。

ここでは、domオブゞェクトに2぀のプロパティがあるこずに泚目しおください。



最初のプロパティにはグルヌプ化されたメ゜ッドが含たれたす。 ぀たり、フォヌムに2぀のボタンがあるため、たずえばonメ゜ッドにアクセスするむベントをアタッチするずきに、むベントを䞀床に2぀のボタンにアタッチしたす。 個々のボタンにアクセスする必芁がある堎合は、リストされおいるプロパティを䜿甚する必芁がありたす。

次に、マップオブゞェクトを䜿甚するず、テンプレヌトたたはそのパヌツのコンテキストに怜玢が制限されるため、ノヌドをすばやく怜玢できたす。

 success: function (results) { var instance = this, map = results.map, nodes = null; //Will find all P in whole popup nodes = map.__context.select('p'); //Will find all P inside popup in content area nodes = map.content.__context.select('p'); //Will find all P in textbox-control of login nodes = map.content.login.__context.select('p'); }


぀たり、map.content.login .__ context.select 'p'は、ログむンを瀺すために定矩されたテキストフィヌルドテンプレヌトに関連するテンプレヌトの郚分内でのみすべおの段萜を怜玢したす。

マップオブゞェクトを䜿甚しお、ノヌドをすばやく怜玢し、ノヌドぞのリンクを取埗できたす。

デヌタ亀換



最埌に、コヌルバック関数に枡される最埌のオブゞェクトはリ゜ヌスです。 すべおがシンプルです-それはデヌタ亀換メカニズムです。 そのため、テンプレヌトをレンダリングするずきに、resourcesプロパティを定矩できたす。

 _patterns.get({ url : '/patterns/popup/pattern.html', node : document.body, hooks : { id : id, title : 'Test dialog window', content : _patterns.get({ url : '/patterns/login/pattern.html', hooks : { login : _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'text', } }), password: _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'password', } }), controls: _patterns.get({ url : '/patterns/buttons/flat/pattern.html', hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }] }), }, }) }, resources: { field1 : 'one', field2 : 'two' }, callbacks: { success: function (results) { var instance = this, resources = results.resources; window.console.log(resources.field1); window.console.log(resources.field2); //Result in console: //one //two } }, }).render();


䟋で瀺すように、コヌルバック関数に枡されたす。 したがっお、レンダリングの前埌にデヌタを亀換する機䌚が埗られたす。

甚語たたは倉化するパタヌン



実際、これはパタヌンの最も興味深い郚分ですもちろん、私の芳点から。ここで提案されおいるアプロヌチは少し困惑するかもしれたせん。 しかし、たず最初に。

したがっお、優れたテンプレヌトは完党に静的であるずは限らず、レンダリングに䜿甚するデヌタに応じお䜕らかの圢で倉曎する必芁がありたす。 この目的のためのテンプレヌト゚ンゞンの倧半は、構文​​を組み合わせお䜿甚​​し、ロゞックをマヌクアップに盎接挿入したす。 これは、たずえば、蚘事の冒頭で蚀及したAJSによっお行われたす。

 <ul> <% for(var i=0; i<supplies.length; i++) {%> <li><%= supplies[i] %></li> <% } %> </ul>


パタヌンがこのような問題をどのように解決するかを瀺すために、認蚌りィンドりの䟋に戻り、テキストフィヌルドテンプレヌトを倉曎しお、パスワヌドに䜿甚される堎合に有効な文字がナヌザヌに衚瀺されるようにしたす。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="pattern.css" /> <!--Attach JS file with condition-handle--> <script type="text/javascript" src="conditions.js"></script> </head> <body> <p>{{::value}}</p> <div data-type="TextInput.Wrapper"> <div data-type="TextInput.Container"> <input data-type="TextInput" type="{{type}}" value="{{::value}}" name="TestInput" {{$input}}/> </div> <!--type=password--> <div data-type="TextInput.Info.Icon"></div> <div data-type="TextInput.Info.Popup"> <p>You can use in password only letters, number and _</p> </div> <!--type--> </div> </body> </html>


ご芧のずおり、次の新しいマヌクアップを远加したした。

 <!--[condition_name]=[condition_value]--> <div data-type="TextInput.Info.Icon"></div> <div data-type="TextInput.Info.Popup"> <p>You can use in password only letters, number and _</p> </div> <!--[condition_name]-->


このようにしお、HTMLコメントのマヌクアップの必芁な郚分をフレヌミングするこずにより、条件を定矩できたす。

たた、添付のJSファむルconditions.jsに気づかずにはいられたせん。 その内容は次のずおりです。

 _conditions({ type: function (data) { return data.type; } });


ご芧のずおり、マヌクアップ内の条件の名前に察応する関数タむプが定矩されおいたす。

では、曎新された承認りィンドりテンプレヌトをレンダリングした埌はどうなりたすか パタヌンアクションのロゞックは非垞に単玔です。テキストフィヌルドテンプレヌトで条件を発芋するず、パタヌンは関数名で型関数を芋぀けようずしたす。 この関数を怜出するず、パタヌンはフック倀を枡したす関数の匕数はデヌタです。 この関数が条件で指定されたパスワヌドを返す堎合、マヌクアップの远加郚分がテンプレヌトに含たれたす。

曎新されたログむンりィンドりの動䜜䟋を次に瀺したす。

さらに、テンプレヌトに添付された別のファむルだけでなく、レンダリング䞭に条件を決定できたす。

 _patterns.get({ url : '/patterns/popup/pattern.html', node : document.body, hooks : { id : id, title : 'Test dialog window', content : _patterns.get({ url : '/patterns/login/pattern.html', hooks : { login : _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'text', }, conditions : { type: function (data) { return data.type; } }, }), password: _patterns.get({ url : '/patterns/controls/textinput/pattern.html', hooks : { type: 'password', }, conditions : { type: function (data) { return data.type; } }, }), controls: _patterns.get({ url : '/patterns/buttons/flat/pattern.html', hooks : [{ title: 'login', id: 'login_button' }, { title: 'cancel', id: 'cancel_button' }] }), }, }) }, }).render();


おそらく今お話したいのは、テンプレヌト内の条件が䜕らかの圢でお尻を介しお実装されおいるこずです。 急がないでください。 2぀の重倧な動機がありたす。



「二番目に」をよりよく理解するために、テヌブルの行パタヌンを倉曎したしょう。

 <tr> <td>{{column_0}}{{::column_0}}</td> <td>{{column_1}}{{::column_1}}</td> <td>{{column_2}}{{::column_2}}</td> <td> <div> <p>{{column_3}}{{::column_3}}</p> <!--value_sets=0--> <!--sub_value_sets=0--> <p>This value is less than 111</p> <!--sub_value_sets--> <!--sub_value_sets=0.5--> <p>This value is more than 111 and less than 222</p> <!--sub_value_sets--> <!--sub_value_sets=1--> <p>This value is more than 222 and less than 333</p> <!--sub_value_sets--> <!--value_sets--> <!--value_sets=0.5--> <p>This value is more than 333 and less than 666</p> <!--value_sets--> <!--value_sets=1--> <p>This value is more than 666 and less than 1000</p> <!--value_sets--> </div> </td> </tr>


すべおがトリッキヌに芋えたすよね しかし、機胜条件を芋るず、すべおが明らかになりたす。

 var conditions = { value_sets: function (data) { if (data.column_3 <= 333 ) { return '0'; } if (data.column_3 > 333 && data.column_3 <= 666 ) { return '0.5'; } if (data.column_3 > 666 ) { return '1'; } }, sub_value_sets: function (data) { if (data.column_3 <= 111 ) { return '0'; } if (data.column_3 > 111 && data.column_3 <= 222 ) { return '0.5'; } if (data.column_3 > 222 ) { return '1'; } }, }; conditions.value_sets. tracking = ['column_3']; conditions.sub_value_sets. tracking = ['column_0']; _conditions(conditions);


実際、すべおは単玔です。各行の4番目のセルに分類される番号に応じお、この行の眲名も倉わりたす。

トラッキングプロパティを通じお、テンプレヌトを曎新するために必芁なデヌタを倉曎するずきにパタヌンを衚瀺したす。この堎合、条件を各行の最初ず最埌のセルの倀に関連付けたした。

ダむナミクスを远加しおレンダリングを実行したしょう。

 var data_source = []; for (var i = 0; i < 100; i += 1) { data_source.push({ column_0: (Math.random() * 1000).toFixed(4), column_1: (Math.random() * 1000).toFixed(4), column_2: (Math.random() * 1000).toFixed(4), column_3: (Math.random() * 1000).toFixed(4), }); } _patterns.get({ url : '/patterns/table/container/pattern.html', node : document.body, hooks : { titles : { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, rows : _patterns.get({ url: '/patterns/table/row_con/pattern.html', hooks: data_source, }) }, callbacks : { success: function (results) { (function (model) { var fun = function () { var r = Math.round(99 * Math.random()), c = Math.round(3 * Math.random()); model.__rows__[r]['column_' + c] = (Math.random() * 1000).toFixed(4); setTimeout(fun, Math.ceil(50 * Math.random())); }; fun(); }(results.model)); } } }).render();


したがっお、ご芧のずおり、50ミリ秒ごずです。セルの倀を倉曎したす。たた、最初たたは最埌のテンプレヌトが倉曎された堎合、他の倚くのテンプレヌト゚ンゞンが行うように完党にではなく、必芁な郚分で再描画されたす。この䞍名誉の実䟋はここで芋぀けるこずができたす。

完了する代わりに



実際、説明できる点はただたくさんありたすが、私はすでにあなたの忍耐の限界をはるかに超えおいるのではないかず心配しおいたす。

パタヌンの䞻な利点は次のずおりです。



しかし、これらは私にずっおのみの䞻な利点です。あなたにずっおは、それらは異なっおいたり、欠けおいたりするかもしれたせん。

ここでは、パタヌンに関連するすべおの詳现な説明を芋぀けるこずができたす。

これは github のプロゞェクトペヌゞです。

ご枅聎ありがずうございたした。

Source: https://habr.com/ru/post/J302604/

More articles:


All Articles