Как сделать Handelbars частичным - PullRequest
Новая
       40

Как сделать Handelbars частичным

0 голосов
/ 13 февраля 2020

Моя общая цель - сделать партиалы (таких как nav, footer, article и т. Д. c.) И хранить их в отдельных файлах и вызывать их там, где они нужны.

Я не могу понять как реализовать частичное несмотря на ссылки на несколько учебных пособий. Во включенном jsfiddle вы можете видеть, что я успешно создал шаблон, передал ему объект данных, а затем добавил его обратно в контейнер, содержащий шаблон. Насколько я понимаю, вы можете зарегистрировать html как частичное, а затем вызвать его. Я понимаю, что это наивно, потому что нет способа узнать, на какие данные следует ссылаться, когда вы его называете (верно?).

https://jsfiddle.net/c6m8btrv/1/

Я также пытался обернуть {{> FavoritesPartial}} тегом, но в браузере ничего не отображалось. Неясно, должен ли частичный вызов быть в теге скрипта.

Вот мой html: 

<head>
    <title>Partial Test</title>
    <meta charset="utf-8">
</head>

<body>

    <h1>This is from the Favorites Partial:</h1>
    <script id="favorites-partial" type="text/x-handlebars-template">
        {{> favoritesPartial}}
    </script>

    <h1>This is from the Favorites Template:</h1>
    <div class="favorites-container">
        <script id="favorites-template" type="text/x-handlebars-template">
            <h3>Favorites</h3>
            <ul>
                <li>Fruit: {{fruit}}</li>
                <li>Sport: {{sport}}</li>
                <li>Music: {{music}}</li>
            </ul>
        </script>
    </div>

<!-- Call jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<!-- Call Handlebars -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.3/handlebars.js"></script>

<!-- Call script.js -->
<script src="script.js"></script>

Вот скрипт. js: 

var favorites = {

    "fruit": "mango",
    "sport": "golf",
    "music": "Rock"

}

//Save favorites template and register as partial
var favoritesTemplate = $("#favorites-template").html();
var compiledFavoritesTemplate = Handlebars.compile(favoritesTemplate);

Handlebars.registerPartial("favoritesPartial", favoritesTemplate);

$(document).ready(function () {

//-----------------
//Favorite Template
//-----------------
    var favoritesHTML = compiledFavoritesTemplate(favorites)
    $(".favorites-container").append(favoritesHTML);
    $(".favorites-partial-output").append(favoritesHTML);
});

РЕДАКТИРОВАТЬ: jsfiddle не отображает рабочий шаблон правильно (должен загрузить руль. js ресурс - не уверен, почему он не спасен существами).

...