2017-02-14 4 views
1

Я искал простой базовый пример использования шаблона Mustache, где разметка и шаблоны Mustache остается в документе HTML (разделение проблем).Услышка шаблонов - Основной пример не отображать и не метать ошибки

Вот где я нахожусь:

<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script> 
</head> 
<body> 
    <div class="container"> 
    <h2>Here is a person</h2> 
    <template id="theTemplate"> 
     {{name}} 
    </template> 
    </div> 

    <script> 
    $(function() { 
     template = $('#theTemplate').html(); 
     data = { 
     name: 'billy' 
     }; 
     Mustache.render(template, data); 
    }); 
    </script> 
</body> 
</html> 

Нет ошибок бросаются, но он не работает!

+1

пожалуйста перепишите название для объяснения ** ** точная проблема этой нити – vsync

ответ

2

Mustache.render возвращает строку, которая является объединением шаблона и данными предоставленного объекта. Он ничего не делает с этой строкой, поэтому, если вы хотите обновить DOM, вам все равно придется делать это вручную. Как вы используете JQuery вы можете использовать append(), чтобы сделать это:

$('h2').append(Mustache.render(template, data)); 

Однако, было бы больше смысла, чтобы включить всю стоимость h2 текста в шаблоне, по крайней мере, сделать его использование стоит:

$(function() { 
 
    template = $('#theTemplate').html(); 
 
    data = { name: 'billy' }; 
 
    $('h2').text(Mustache.render(template, data)); 
 
});
<link rel="stylesheet" href="style.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script> 
 
<div class="container"> 
 
    <h2></h2> 
 
    <template id="theTemplate"> 
 
    Here is a person named {{name}} 
 
    </template> 
 
</div>

+0

Ого, я заслуживаю быть downvoted для этого. Спасибо Рори! –

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