0

モデルオブジェクト内のすべての配列値をレンダリングしようとしています。配列の最初の値をレンダリングすることはできますが、残りの値をレンダリングすることはできません。各関数内で動作させようとしましたが、動作しません。各行のすべての配列値を表示する必要があります。例を調べてください。すぐにわかります。

配列の最初の値のみをレンダリングする作業サンプルを次に示します: http://jsfiddle.net/N2b5M/1123/

タグ配列内のすべての日付をそれぞれレンダリングしようとすると、動作しません: http://jsfiddle.net/N2b5M/1136/

テンプレート：

{{#users}} 
    <tr> 
        <td>{{fullName person}}</td> 
        <td>{{jobTitle}}</td> 
        <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
        <td>{{currentDate}}</td>
    </tr> 
{{/users}}

データ：

var data = { 
    users: [ { 
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "P",
                    "date": "10.9.2014"
                },
                {
                    "type": "C",
                    "date": "18.12.2014"
                },
                {
                    "type": "T",
                    "date": "2.10.2014"
                }
            ]
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa" 
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "T",
                    "date": "2.11.2014"
                }
            ]
        }, 
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "T",
                    "date": "11.12.2014"
                }
            ]
        }, 
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
};

JavaScript:

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

Handlebars.registerHelper('currentDate', function(context) {
    var currentTag = this.person.tags[0];
    var currentDate = currentTag.date;
    return currentDate;
});

$('body').append(template(data));

タグ配列内のすべての日付をレンダリングしようとしていて、次のように試しました:

{{#each person.tags}}
      <td>{{currentDate}}</td>
{{/each}} 

Handlebars.registerHelper('each', function(context, options) {
    var tagsTotal = context.person.tags.length;
    var ret = '';
    console.log(tagsTotal);
    for( i = 0; i < tagsTotal; i++) {
        var tagType = context.type;

        ret += options.fn(context[i]);
    }
    return ret;
});
4

1 に答える 1

2

これが醜いかどうか、またはこれを行うためのより良い方法があるかどうかはわかりません。しかし、これは機能します：

<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template"> <table>
    <thead> 
        <th>Name</th> 
        <th>Job Title</th> 
        <th>Twitter</th> 
        <th>Dates</th>         
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{fullName person}}</td> 
            <td>{{jobTitle}}</td> 
            <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>

            {{#person}}
                {{#tags}}
                    <td>
                        {{date}}
                    </td>

                {{/tags}}

            {{/person}}
        </tr> 
        {{/users}} 
    </tbody> 
</table> 
</script>
于 2014-10-22T12:14:50.093 に答える