mustacheレンダリングリスト項目index

4683 ワード

一、テンプレートの紹介
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