2

ナビゲーションバーを作成しようとしているサンプルオブジェクトがあり、それぞれliに次のようなカスタムクラス名があります:

<ul>
      <li class="mainLink1">
          <a href="m1/home.html">home</a>
          <ul class="subParent1">
              <li class="sublink1"><a href="s1/home.html">s1/home</a></li>
              <li class="sublink2"><a href="s2/home.html">s2/home</a></li>
         </ul>
     </li>
     <li class="mainLink2">
         <a href="m2/service.html">service</a>
         <ul class="subParent2">
             <li class="sublink1"><a href="s1/service.html">s1/service</a></li>
             <li class="sublink2"><a href="s2/service.html">s2/service</a></li>
        </ul>
     </li>
</ul>

これらのクラス名はすべてヘルパー関数で生成する必要があることはわかっていますが、適切な結果が得られず、混乱しています。これが私の試みです。

テンプレートを使用した私のhtml：

<div id="navigate"></div>

<script type="text/handlebars-x-template" id="menu">
    <ul>
        {{#list}}
           <li><a href="{{link}}">{{name}}</a></li>
            {{#if list.sub}}
                <ul>
                    {{#each this}}
                       <li><a href="{{link}}">{{name}}</a></li>
                    {{/each}}
                </ul>
            {{/if}}
        {{/list}}
    </ul>
</script>

私のヘルパー関数と実装:

var obj = [{"name":"home","link":"m1/home.html","sub":[{"sname":"s1/home","slink":"s1/home.html"},{"sname":"s/home","slink2":"s2/home.html"}]},{"name":"service","link":"m2/service.html","sub":[{"sname":"s1/service","slink":"s1/service.html"},{"sname":"s/service","slink2":"s2/service.html"}]}]

Handlebars.registerHelper("list", function(context, option){
    console.log(context, option);
})

var temp = Handlebars.compile($("#menu").html());
var html = $("#navigate").html(temp(obj));

私の試みが非常に悪いことに同意します。それを修正し、 @index プロパティを使用してクラス名を適用するためのヘルプ。

上記のフィドル。

4

1 に答える 1

2

最初にcustom helperコンテキストがありません。これは、ヘルパーの名前で渡されるコンテキストオブジェクトに他なりません

Handlebars.registerHelper("list", function(context, option) {

したがって、デフォルトcontextの引数はoptions

Context はヘルパーに渡されるものです

 {{#list this}}
          ^------ This is the context

次に、オブジェクトはオブジェクトの配列であるため、アプローチは機能しません。テンプレート構造の使用方法を変更するか、オブジェクトを繰り返し処理して単一のオブジェクトをテンプレートに渡す必要があります。

そして、プロパティを保持するkey呼び出しはありませんlistsub

{{#if list.sub}}

察するに

{{#if this.sub}}

コード

Handlebars.registerHelper("list", function(context, options) {
    // Return fn from options that will pass in the object to
    // the truthy function
    console.log(context + ' :: ' + options); 
    return options.fn(this);
})

// Compile your template
var temp = Handlebars.compile($("#menu").html());
var $ul = $('#navigate > ul');
// Append it to the container after iterating over array of objects
for(var i=0; i<obj.length; i++) {
    $ul.append(temp(obj[i]));
}

フィドルをチェック

アップデート

その場合、そもそもテンプレート ヘルパーは必要ありません。eachループと@indexリストを反復処理するだけです。

テンプレート

<script type="text/handlebars-x-template" id="menu">
    {{#each this}}
        <li class="mainLink{{@index}}">
            <a href="{{link}}">{{name}}</a>
        {{#if this.sub}}
            <ul class="subParent{{@index}}">
                {{#each this.sub}}
                    <li class="sublink{{@index}}"><a href="{{slink}}">{{sname}}</a></li>
                {{/each}}
            </ul>
        {{/if}}
      </li>
    {{/each}}
</script>

フィドルをチェック

于 2013-08-23T05:38:41.657 に答える