mustacheレンダリングリスト項目index
4683 ワード
一、テンプレートの紹介
1.簡単に紹介する
mustacheは、データをテンプレートにレンダリングするための論理的なテンプレートエンジンであり、レンダリング後の構造をどこにでも出力することができます.HTML、File….公式GitHub
mustacheはコンテキスト環境を通してデータをテンプレートにレンダリングします.
2.Contect簡単説明
Contextはデータの対象自体に対応しています.最初はContectが対応しています.リストをレンダリングする時、Conteetの指差は変化が発生して、リストのある項目にレンダリングするごとに、Contectはある項目のデータを指します.同時に内部のparentポインタはキャッシュしています.データをレンダリングするたびに、まず現在のContectポインタからkeyに基づいて対応するvalueを探します.現在のContectポインタに対応するkeyがない場合は、前のレベルのContectにデータを合わせて、順に類推します.実は全体のContectのモードはデータの階層構造に対応しています.
3.簡単に使う
使うのは簡単です.よく使うコマンドはいくつかしかありません.{}、{{}、{@}、{菗氨}コードを直接貼り付けます.コードのコメントに注意事項があります.
テンプレート:
1.レンダリング前にデータを再構築する
a.ソースコード355行、Contect構築関数
以上はただ私自身の変更です.もし何か足りないところがあれば、あるいは他のより良い解決策があれば、コメントの中で交流できます.
最後に改版後(v 2.3.0)の資源を添付します.mustache-inndex
1.簡単に紹介する
mustacheは、データをテンプレートにレンダリングするための論理的なテンプレートエンジンであり、レンダリング後の構造をどこにでも出力することができます.HTML、File….公式GitHub
mustacheはコンテキスト環境を通してデータをテンプレートにレンダリングします.
2.Contect簡単説明
Contextはデータの対象自体に対応しています.最初はContectが対応しています.リストをレンダリングする時、Conteetの指差は変化が発生して、リストのある項目にレンダリングするごとに、Contectはある項目のデータを指します.同時に内部のparentポインタはキャッシュしています.データをレンダリングするたびに、まず現在のContectポインタからkeyに基づいて対応するvalueを探します.現在のContectポインタに対応するkeyがない場合は、前のレベルのContectにデータを合わせて、順に類推します.実は全体のContectのモードはデータの階層構造に対応しています.
3.簡単に使う
使うのは簡単です.よく使うコマンドはいくつかしかありません.{}、{{}、{@}、{菗氨}コードを直接貼り付けます.コードのコメントに注意事項があります.
テンプレート:
{{ id }} --
{{! mustache : name name }}
{{#name}}
{{ name }}
{{/name}} --
{{#adult}}
{{/adult}}
{{^adult}}
{{/adult}}<br>
{{^subdata}}
subdata
{{/subdata}}
<ul>
{{#subdata}}
<li>{{ id }} -- {{ title }} -- {{ desc }}</li>
{{/subdata}}
</ul>
データおよびレンダリング:var data = {
d: 1,
name: 'name',
age: 20,
subdata: [{
title: ' 1',
desc: ' 1'
}, {
title: ' 2',
desc: ' 2'
}],
/* if|for */
/*
{{^}} : 、null, undefined, false, 0, or NaN,
( trim)
{{#}} {{^}}
*/
adult: function() {
// this
return this.age >= 18;
}
};
var tpl = document.querySelector("#demoTpl").innerHTML;
document.write(Mustache.render(tpl, data));
/*
Mustache parse(template) ,
, 。
, ;
( , );
, 。
*/
Mustache.clearCache();
二、レンダリングリストindex解決案1.レンダリング前にデータを再構築する
var subdata = [{
title: ' 1',
desc: ' 1'
}, {
title: ' 2',
desc: ' 2'
}];
for (var i = 0, sl = subdata.length; i < sl; i++) {
var currItem = subdata[i];
// , index
Object.assign(currItem, {index: i});
subdata[i] = currItem;
}
2.グローバル変数を通じてvar template = "{{#subdata}}{{index}}{{/subdata}}";
ar dataIndex = -1; // index
var data = {
subdata: [{
title: ' 1',
desc: ' 1'
}, {
title: ' 2',
desc: ' 2'
}],
// index index
index: function() {
return ++dataIndex;
}
};
3.ソースコードを修正して以下の話をします.ソースコードの簡単な修正について、ソースコードにリストindexをサポートさせます.ポイントはContectの修正です.私は直接コードを貼ります.コードのコメントに変更のヒントがあります.a.ソースコード355行、Contect構築関数
/**
* Represents a rendering context by wrapping a view object and
* maintaining a reference to the parent context.
* Context (view, parentContext) --> Context (view, parentContext, itemIndex)
* @param {Integer} itemIndex index
*/
function Context (view, parentContext, itemIndex) {
this.view = view;
this.itemIndex = itemIndex; // item, index
this.cache = { '.': this.view };
this.parent = parentContext;
}
b.Contect push関数を修正する/**
* Creates a new context using the given view with this context as the parent.
* push(view) --> push(view, itemIndex)
* @param {Number} [itemIndex] [ Context , item index, index]
*/
Context.prototype.push = function push (view, itemIndex) {
return new Context(view, this, itemIndex);
};
c.Contect lookup関数を修正する/**
* Returns the value of the given name in this context, traversing
* up the context hierarchy if the value is absent in this context's view.
* , name 'index|$index',
* Array index; name , name ]
*/
Context.prototype.lookup = function lookup (name) {
var cache = this.cache, itemIndex = this.itemIndex; // index
var value;
if (cache.hasOwnProperty(name)) {
value = cache[name];
} else if((name === 'index' || name === '$index') && itemIndex >= 0) { // index
// index , $index
value = itemIndex;
} else {
………
d.Writer-->レンダーSection関数を修正するif (isArray(value)) {
for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
// context.push(value[j]) --> context.push(value[j], j) index
buffer += this.renderTokens(token[4], context.push(value[j], j), partials, originalTemplate);
}
}
このように基本的に変更しました.それからindexを{index}、{index}で取得できます.以上はただ私自身の変更です.もし何か足りないところがあれば、あるいは他のより良い解決策があれば、コメントの中で交流できます.
最後に改版後(v 2.3.0)の資源を添付します.mustache-inndex