Как добавить шаблон руля в div с определенным идентификатором? - PullRequest
Новая
       36

Как добавить шаблон руля в div с определенным идентификатором?

1 голос
/ 22 марта 2012

У меня есть простой шаблон, который я заполняю некоторыми данными, затем я пытаюсь добавить его до того, как один сделал, но, похоже, он перестает работать.

вот это 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 голосов
/ 22 марта 2012

Я пытался решить вашу проблему.

Ваш Json кажется мне не "совместимым с рулем". Я переписал его с корневым элементом, который будет использоваться в операторе {{#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/

Надеюсь, это то, что вы хотите.

...