шаблон панели управления с основой внутри div не рендерит

Question

шаблон панели управления с основой внутри div не рендерит

0

Здесь приведен пример скрипки

Я следую шаблону, который успешно обрабатывается с помощью handlerbarjs -

<ul>
    {{#each models}}<li>{{attributes.subject_name}}</li>{{/each}}
</ul>

Но при том, что одни и те же данные передаются другому шаблону, он не отображает. Если я попытаюсь заменить li на table, она не работает.

<table class="table">
    <thead>
        <tr>
            <th>Name</th>               
        </tr>
    </thead>        
    {{#each models}}
         <tr>
            <td>{{attributes.subject_name}}</td>            
        </tr>
   {{/each}}
</table>

Код, который компилирует tempalte -

 template: Handlebars.compile($("#subjectList").html()) ,

#subjectList - это идентификатор родительского div (не упоминается в вопросе)

И вот как я передаю данные в tempalte -

this.$el.html(this.template(this.collection));

Как я проверял в DevTools, я вижу, что сбор загружается правильно, и когда первый шаблон получает визуализацию, я думаю, что данные передаются правильно.

Gimali 20 дек. 2013, в 15:52

Источник

0

Покажите свой код представления, где вы компилируете шаблоны.
kinakuta 20 дек. 2013, в 15:13
0

@kinakuta Я добавил больше кода и информации.
Gimali 20 дек. 2013, в 15:18
0

в сторону, вы должны добавить tbody
Andbdrew 20 дек. 2013, в 15:22
0

@ Andbdrew да .. Я добавил это в локальный код сейчас.
Gimali 20 дек. 2013, в 15:24
0

Вы храните свой шаблон внутри <div> ? Можете ли вы предоставить минимальную функциональную демоверсию на jsbin.com или jsfiddle.net?
mu is too short 20 дек. 2013, в 17:25
0

@muistooshort Я настроил скрипку (так же, как упоминалось в вопросе) здесь, на jsfiddle.net/K9gLK . Код в скрипте уменьшен, полностью исключая магистральную часть. Просто шаблон руля и присвоение ему данных. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще.
Gimali 20 дек. 2013, в 17:56
0

@muistooshort и да, шаблон находится внутри <div> . Я не использовал тег script с типом text/x-handlebars-template потому что я буду вызывать Handlebars.compile() из магистрали (в случае скрипты из domReady).
Gimali 20 дек. 2013, в 18:01
0

Кажется, что скрипка работает нормально, поэтому проблема в другом месте. Никогда не храните свои шаблоны в <div> , шаблоны почти никогда не являются действительным HTML, поэтому сообщение браузеру о том, что они являются HTML, просто вызывает проблемы. Поместите ваши шаблоны в контейнеры <script type="text/x-handlebars"> .
mu is too short 20 дек. 2013, в 18:35
0

@muistooshort ок. Я изменю это. Но в скрипте переменные внутри <li> работают. Но перебор одной и той же переменной внутри table не работает. Он не должен идти в блок {{else}} поскольку у subjects есть 2 элемента внутри.
Gimali 20 дек. 2013, в 18:43
0

@muistooshort О, черт возьми, ты прав. : D. Это была, очевидно, проблема, о которой вы упоминали в предыдущем комментарии. Когда я изменил div на тег script, он работает. Если вы отправите это как ответ, я могу принять это. Другие пользователи также могут столкнуться с той же проблемой.
Gimali 20 дек. 2013, в 18:47

Показать ещё 8 комментариев

Теги:

javascript

html

handlebars.js

backbone.js

1 ответ

Ещё вопросы

Покажите свой код представления, где вы компилируете шаблоны.
@kinakuta Я добавил больше кода и информации.
в сторону, вы должны добавить tbody
@ Andbdrew да .. Я добавил это в локальный код сейчас.
Вы храните свой шаблон внутри <div> ? Можете ли вы предоставить минимальную функциональную демоверсию на jsbin.com или jsfiddle.net?
@muistooshort Я настроил скрипку (так же, как упоминалось в вопросе) здесь, на jsfiddle.net/K9gLK . Код в скрипте уменьшен, полностью исключая магистральную часть. Просто шаблон руля и присвоение ему данных. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще.
@muistooshort и да, шаблон находится внутри <div> . Я не использовал тег script с типом text/x-handlebars-template потому что я буду вызывать Handlebars.compile() из магистрали (в случае скрипты из domReady).
Кажется, что скрипка работает нормально, поэтому проблема в другом месте. Никогда не храните свои шаблоны в <div> , шаблоны почти никогда не являются действительным HTML, поэтому сообщение браузеру о том, что они являются HTML, просто вызывает проблемы. Поместите ваши шаблоны в контейнеры <script type="text/x-handlebars"> .
@muistooshort ок. Я изменю это. Но в скрипте переменные внутри <li> работают. Но перебор одной и той же переменной внутри table не работает. Он не должен идти в блок {{else}} поскольку у subjects есть 2 элемента внутри.
@muistooshort О, черт возьми, ты прав. : D. Это была, очевидно, проблема, о которой вы упоминали в предыдущем комментарии. Когда я изменил div на тег script, он работает. Если вы отправите это как ответ, я могу принять это. Другие пользователи также могут столкнуться с той же проблемой.

mu is too short · Accepted Answer · 2013-12-20T17-37-00.000Z

Шаблон в вашем примере jsfiddle:

{{#each subjects}}
    <li>{{subject_name}}</li>
{{/each}}

<table class="table">
    {{#each subjects}}
        <tr>
            <td>{{subject_name}}</td>
        </tr>
    {{else}}
        <tr>
            <td colspan="4">No Subjects Added Yet.</td>
        </tr>
    {{/each}}
</table>

недействителен HTML. Если вы поместите это внутри <div> (даже скрытого), браузер часто будет пытаться переписать его, чтобы сделать его действительным HTML. Этот процесс очистки, как правило, мяснет ваш шаблон.

Вам нужно разместить свой шаблон внутри того, что браузер не будет пытаться интерпретировать. Стандартное решение - использовать <script> с соответствующим типом контента:

<script id="subjectlist" type="text/x-handlebars">
    ...
</script>

Кроме того, <li> должен иметь родительский элемент <ul>, <ol> или <menu> поэтому ваш шаблон jsfiddle должен выглядеть следующим образом:

<script id="subjectList" type="text/x-handlebars">
    <ul>
        {{#each subjects}}
            <li>{{subject_name}}</li>
        {{/each}}
    </ul>
    ...
</script>

Демо: http://jsfiddle.net/ambiguous/kxc52/

Я подал этот вопрос на GitHub, и теперь он закрыт. В комментариях мне предложили прочитать github.com/wycats/handlebars.js/issues/… комментарий из предыдущего номера, и в нем четко сказано то же самое, что и вы. :)