Mustacheテンプレート - 基本的な例が表示されず、エラーがスローされない

MustacheのマークアップとテンプレートがHTMLドキュメントに残っている、Mustacheテンプレートを使用する簡単な基本的な例を探しています。 Mustacheテンプレート - 基本的な例が表示されず、エラーがスローされない

<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>

エラーなし

がスローされているが、それは動作していない：私が午前のはここ

です！

出典

2017-02-14 Jethro Hazelhurst

このスレッド – vsync

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>

出典

2017-02-14 10:43:43

の**正確な**問題を説明するための再書き込みしてくださいタイトルすごいああ、私はそのためdownvotedれるに値します。ありがとう、ロリー！ –

Mustacheテンプレート - 基本的な例が表示されず、エラーがスローされない

答えて

関連する問題