如何将把手模板附加到具有特定ID的div?

时间:2012-03-22 16:33:30

标签: jquery templates each handlebars.js

我有一个简单的模板,我填充了一些数据然后我试图在它之前附加它,但它似乎停止工作。

这是jsfiddle

和代码:

<ul class="wall_message">
    <li id="168" class="msgid">
        <div id="commentbox2">
        </div>
    </li>
    <!-- in this case the json will be added only before `commentbox2`-->
    <li id="168" class="msgid">
        <div id="commentbox3">
        </div>
    </li>
</ul>




<script id="comment" type="text/x-handlebars-template">
                {{#each this}}
                        <div class="commentsp">{{comment}}</div>
                {{/each}}
</script>


<script>

//right now this json has only one main key (5), but it could have more
var data = {"5":
            {"id":"2", "comment":"xxxxxxxx"}
           }

/initiate the template
var template = Handlebars.compile( $('#comment').html() );

// place the json data in the template. the template will iterate through
msg = template(data);

jQuery.each(data, function(i, val) {
    console.log(val.id)

    //find the div with commentbox2 and add the msg before
    $('div#commentbox'+val.id).before(msg);
});
</script>

我不确定在这种情况下我做错了什么。

任何想法?

感谢

1 个答案:

答案 0 :(得分:0)

我试图解决你的问题。

你的Json对我来说似乎不是“车把兼容”。 我用root元素重写了它,它将在{{#each}}语句中使用。

var data = { 
    'items': [
        {"id":"2", "comment": "xxxxxxxx"}, 
        {"id":"3", "comment": "yyyyyyy"}
    ]
};

var template = Handlebars.compile( $('#comment').html() );
var msg = template(data);

jQuery.each(data.items, function(i, val) { 
    $('div#commentbox'+val.id).before(msg);
});

请参阅此处的完整演示http://jsfiddle.net/nsvT3/11/

我希望这就是你想要的。