Усы JS Templating - Как вставить переменную в строку тега скрипта? - PullRequest
Новая
       8

Усы JS Templating - Как вставить переменную в строку тега скрипта?

7 голосов
/ 29 января 2012

Я только начал использовать Усы, и мне это до сих пор нравится, но это меня озадачило.

Я использую Gist API GitHub, чтобы раскрыть мои суть, и часть того, что я хочу сделать, - включить функцию встраивания в мою страницу. Проблема в том, что усы, похоже, не хотят иметь ничего общего с моим динамическим тегом скрипта.

Например, это прекрасно работает: 

<div class="gist-detail">
    {{id}} <!-- This produces a valid Gist ID -->
</div>

Кроме того, это прекрасно работает: 

<div class="gist-detail">
    <script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>

Если я попытаюсь собрать эти вместе , что-то пойдет не так: 

<div class="gist-detail">
    <script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>

Chrome Inspector показывает это: 

GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)

... мне кажется, что-то странное с побегами или еще чем-то, поэтому я переключаюсь на необработанный синтаксис: 

<div class="gist-detail">
    <script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>

И я получаю тот же результат в Инспекторе: 

GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)

Как получить правильные значения для встраивания в тег script?

EDIT

Я внедряю шаблон следующим образом (в document.ready: 

function LoadGists() {
    var gistApi = "https://api.github.com/users/<myuser>/gists";

    $.getJSON(gistApi, function (data) {

        var html, template;
        template = $('#mustache_gist').html();

        html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
        $('.gist').html(html);
    });

}

На самом деле шаблон находится внутри части ruby, но он заключен в div (не тег сценария, это проблема?) (Это скрыто): 

<div id="mustache_gist" style="display: none;">

    {{#gists}}
        <!-- see above -->
    {{/gists}}

</div>

Я предполагаю, что div в порядке, а не script, потому что в любом случае я потяну .html(). Это плохое предположение?

Ответы [ 3 ]

4 голосов
/ 23 марта 2013

Чтобы избежать автоматического выхода из усов, используйте {{{token}}} вместо {{token}}.

0 голосов
/ 29 января 2012

Похоже, ваш скрипт получает запрос до того, как у Усташа появится шанс обновить свойство src.Что вы хотите сделать, это определить шаблон таким образом, чтобы он не анализировался как часть DOM.Распространенным подходом является определение вашего шаблона внутри тега <textarea>.Это сохранит форматирование и предотвратит экранирование символов. 

<textarea id="gist-detail-template" style="display:none">
  <script src='http://gist.github.com/{{id}}.js'></script>
</textarea>

Теперь, чтобы создать экземпляр шаблона: 

var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);

Вот официальный пример: http://mustache.github.com/#demo

0 голосов
/ 29 января 2012

Похоже, ваш шаблон находится в HTML, и попытка получить шаблон с использованием html() приводит к возврату шаблона с предварительным URL-адресом. Попробуйте вместо этого разместить шаблон внутри тега <script type="text/html">.

Когда вы встраиваете свой шаблон в элемент HTML, который за исключением дочерних элементов HTML, он может быть обработан браузером как HTML. Может произойти побег. Используя тег <script> с типом содержимого, не относящимся к сценарию, вы в основном говорите браузеру не трогать ваш шаблон.

...