すべてのHTMLでのH5は、ここでは、ELラベルを持っていません。だから我々は唯一のテンプレートを使用することができます。利点は、上記に記載されています
随時更新作業への世間の注目のスキャンコード番号、
JSONを解析するWeb開発、jsは通常のものです。非常に面倒。限り、あなたはテンプレートを定義すると、JSONオブジェクトを提供し、テンプレートを使用してハンドルバーには、ハンドルバーにそれJSONオブジェクトは、あなたのテンプレートを設定することができ、それは非常に使いやすいです！
- すべてのHTMLでのH5は、ここでは、ELラベルを持っていません。だから我々は唯一のテンプレートを使用することができます。利点は、上記に記載されています。
ループスルーでH5
- 最初のステップは：テンプレートの背景にHTML、JSONでテンプレートを定義します。
<script id="task-table-template" type="text/x-handlebars-template">
{{#each this}}//遍历循环的格式，相当于foreach
<a href="{{link}}">//json中的link必须是{{}}格式
<strong>
{{Obj_title}}//同上
</strong>
</a>
{{/each}}
</script>- ステップ2：このテンプレートでは、JSをインスタンス化されます
var myTemplate = Handlebars.compile($("#task-table-template").html());- 第三段階：渡された背景表示JSON、およびテンプレートの表示位置を決定し、列子次のテンプレートは、DIVクラス= notice_srcollに表示しました
$('.notice_srcoll').html(myTemplate(data.noticeTasklist));- JSONは列子を見て、ここで言及馴染みJSONであります
var data = { users: [
{username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
]};もし他に使用中のH5
- 唯一の唯一の真と偽の判断サポートされているオリジナルのエコロジーを、サポートしている他の場合では、ハンドルが、今回、我々はそれを行うので、それは、ちょうど真と偽のではない多くの場合、実際に私たちのロジックの判断。それ以外の場合は、元の生態を見てみましょう
{{#if score}}
<li>
<font>
<input type="checkbox" name="you" id="{{id}}" class="regular-checkbox big-checkbox" value="{{id}}" checked disabled/>
<label for="{{id}}"></label>
</font>
<div class="li_div">
<strong>
{{name}}
</strong>
<p>主讲老师
{{teacher}}
</p>
</div>
</li>
{{else}}
<li>
<font><input type="checkbox" name="you" id="{{id}}1" class="regular-checkbox big-checkbox" value="{{id}}" />
<label for="{{id}}1"> </label>
</font>
<div class='li_div'>
<strong>
"{{name}}"
</strong>
<p>主讲老师
{{teacher}}
</p>
</div>
</li>
{{/if}}そのスコアは、ここで[]戻りが偽である未定義のヌル偽と判定されず、ここでサイズ分画を決定することができません。今回は、拡張子が覚めたハンドルバーの上にヘルパーを定義するためにHandlebars.registerHelper通ってきます。
htmlコード
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}- ハンドルバーのJS拡張
//注册一个比较大小的Helper,判断v1是否大于v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//满足添加继续执行
return options.fn(this);
}else{
//不满足条件执行{{else}}部分
return options.inverse(this);
}
});言葉はブロックレベルであるため、我々はオプションがある場合、我々はフロント、プラスオプションで＃を追加する必要があり、後者の機能は、オプションを渡さない場合は、その後、我々は通話を指示することができ、イベントを登録Handlebars.registerHelperの使用で、説明する必要がありますヘルパー。
- Aアウト物事
Handlebars.registerHelper("addOne",function(index,options){
return parseInt(index)+1;
});- コール
<label for="checkbox-2-{{addOne @index}}"></label>- 第二中シング
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//满足添加继续执行
return options.fn(this);
}else{
//不满足条件执行{{else}}部分
return options.inverse(this);
}
});- コール
{{#compare age 20}}- サウンドトラックもあれば、マルチレベルの裁判官をサポートしています
{{#if name.xxx}}，这样写就假设name属性是一个map，检测name属性中是否包含xxx属性。オプション・パラメータのヘルパー
- ここのブログ、オンラインリファレンスケース列です
{{#sort ages id="ages-list" class="con" }}
<span>{{@name}}:{{this}}</span>
{{/sort}}- 上の情報をコンパイルした後のオプションに梱包されています。ここで登録コードがあります
//上面的信息在下面的options里
Handlebars.registerHelper("sort",function(context,options){
var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">";
for(;i<context.length;i++){
str+=options.fn(context[i],{data:{name:options.data[i]}});
}
str+="</div>";
return str;
}); - オプションのヘルパーは、その情報が含まれて？
- data：可以在渲染模板时，将其传进去，如template(context, {data: data}) 。(//这里后面会涉及)
- hash : 保存写模板时，可以将一些值以key-value对的形式传进去,比如上面的div里有ID 和 classs属性，这两个都是键值对，都会存在options.hash中，这里我们可以看成是map
- fn ： 方法，官方解释说“options.fn的可以被认为是被编译过的普通handlebars模板，它的调用的执行环境被认为是‘this’，所以你可以把this作为执行上下文去调用它”，这里存放了上面那个div中的闭环体。什么是闭环体？所谓闭环体就是有开有闭，上面div里那个span就是闭环体，<zzz></zzz>形如这样的就是闭环体。
- inverse : 给if的block的else来用的.说白了就是给{{else}}使用的。- データソースとテンプレートのレンダリング
var template = Handlebars.compile($("#people-template").html());
var temp = {ages:[23,24,56,64]}
var result = template(temp,{data:["tom","jak","lili","jim"]});
/*result:
<div id="ages-list" class="con">
<span>jak:24</span>
<span>lili:56</span>
<span>jim:64</span>
</div>レンダリングに使用されるテンプレートは、
var result = template(temp,{data:["tom","jak","lili","jim"]});データをレンダリングしながら、着信データである。JSONツーパスJSONは、第二のJSONテンプレートプレースホルダにデータを交換することで、通常の状況下でのデータ転送、（{{@。文言..}}プレースホルダ）。STR + = options.fn（コンテキスト[I]、{データ：{名：options.data [I]}}）;着信データが支払われたときにテンプレート名フィールドにレンダリングされるこの文{{@name} }プレースホルダ。コンテキスト[I]は、{{これは}}、{{年齢}}に相当するテキストに渡されます。したがって、このコンテキストは、以下を参照のdiv、divの中に私の年齢ので、私のデータソースが年齢であるなど、私は上記の使用理由、それは、年齢を使用する必要があり、{{この}}レンダリング時に一致することを確認されることそれは年齢です。
各書き込みシニアリストを模倣
- テンプレート
{{#each comments}}
<div class="comment">
<h2>{{subject}}</h2>
{{{body}}}
</div>
{{/each}}- 上記のテンプレートで見ることが、私たちは自分自身をDIV、DIVを横断しているライン上で直接私たちのヘルパートラバースはので、私たちにoptions.fnで、閉じられたボディです。
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + options.fn(context[i]);
}
return ret;
});このことから、我々は、より高度な横断を書くことができます
テンプレート
{{#list nav}}
<a href="{{url}}">{{title}}</a>
{{/list}}- ヘルパーは、私たちがそこにoptions.fn自動的に、値を渡し、あるクローズドボディを、見ることは難しいことではありません
<a></a>アドオンがあり、私たちが行う必要がある、<ul></ul>とのそれぞれに追加<li></li>閉ループ体。この仕様はかなり多くを持っています。また、公式サイトを提供します。
Handlebars.registerHelper('list', function(context, options) {
var ret = "<ul>";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + "<li>" + options.fn(context[i]) + "</li>";
}
return ret + "</ul>";
});H5の空白の処理
- 空白のテンプレートは、無視することができ口ひげの両側を宣言することができ、あなたは単に〜の文字を追加することができます。これを書いた後、空白のすべてのこの側面は、最近ハンドル式または非空白文字のこの辺までは、削除されます
{{#each nav ~}}
<a href="{{url}}">
{{~#if test}}
{{~title}}
{{~^~}}
Empty
{{~/if~}}
</a>
{{~/each}}{
nav: [
{url: 'foo', test: true, title: 'bar'},
{url: 'bar'}
]
}- 任意の行なしの結果は、使用してフォーマットに空白がありません。
<a href="foo">bar</a><a href="bar">Empty</a>随時更新作業への世間の注目のスキャンコード番号、
＃チームに参加
マイクロチャンネル公衆数
