Handlebars.js Генерация частичного подфайла

У меня возникла проблема с генерацией Partials/Sub Template в Handlebars.js.Handlebars.js Генерация частичного подфайла

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

Ниже приведен код, который я использую:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Handlebars.js example</title> 
</head> 
<body> 
    <div id="placeholder">This will get replaced by handlebars.js</div> 

    <script type="text/javascript" src="handlebars.js"></script> 

    <script id="myTemplate" type="x-handlebars-template"> 
    {{#each allShoes}} 
    <li> 
    <span> {{name}} - </span> price: {{price}} 
    {{> description}} 
    </li> 
    {{/each}} 
</script> 




    <script id="shoe-description" type="x-handlebars-template"> 
<ul> 
    <li>{{color}}</li> 
    <li>{{size}}</li> 
</ul> 
</script> 

    <script type="text/javascript"> 
     var source = document.getElementById("myTemplate").innerHTML; 
     var template = Handlebars.compile(source); 

     // Register the Partial 
     //Handlebars.registerPartial("description", $("#shoe-description").html()); 

     var shoesData = { 
          allShoes:[ 
             {name:"Nike", price:199.00,color:"black", size:10}, 
             {name:"Loafers", price:59.00, color:"blue", size:9}, 
             {name:"Wing Tip", price:259.00, color:"brown", size:11} 
             ] 
          }; 

     Handlebars.registerPartial("description", $("#shoe-description").html()); 
     document.getElementById("placeholder").innerHTML = template(shoesData); 


    </script> 



</body> 
</html>

Есть ли какие-либо проблемы с registerPartial?

Любая помощь приветствуется.

Спасибо, Анкит Танна

источник

2013-07-20 Ankit Tanna

Я думаю, что ваши проблемы рендеринга является побочным эффектом попросив браузер, чтобы сделать неверный HTML. Ваш HTML заканчивается, более или менее, эта структура:

<div> 
    <li> 
     <ul>...</ul> 
    </li> 
    ... 
</div>

Но <li>обязательно имеют <ul>, <ol> или <menu> в качестве родителя. Привожу specification:

Разрешенные родительские элементы

ул, ола, меню

Итак, имеющих <div> как родитель <li> является недействительным, и браузер может переписать не -quite-HTML, чтобы сделать его действительным HTML. Эта коррекция может вызвать беспорядок ваших внутренних списков. Исправьте HTML и попробуйте еще раз:

<script id="myTemplate" type="x-handlebars-template"> 
    <ul> 
     {{#each allShoes}} 
      ... 
     {{/each}} 
    </ul> 
</script>

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

источник

2013-07-20 19:54:27

спасибо MU.But HTML обычно оказывает право контента? Вы Awesome с handlebars.js :) –

Проблема в том же, что и в продукте Dreamweaver CC Live View не работает. Не знаю, почему! попытается импортировать используемую вами Handlebars lib. Будет держать вас в курсе. –

Извините, проблема в том, что файл jQuery, который я использую, поврежден. Его импорт по умолчанию так же, как флажок в jsfiddle. Но в моем случае это не сработало. :) Теперь его работа. –

Handlebars.js Генерация частичного подфайла

ответ

Смежные вопросы