jquery mustache.js 不工作

3bygqnnd 于 2022-11-22 发布在 jQuery

关注(0)|答案(6)|浏览(152)

我尝试使用mustache.js模板，但我的基本代码不工作，请帮助我哪里出错-

var person = {
    firstName: "Christophe",
    lastName: "Coenraets"
};

var template = "<h1>{{firstName}} {{lastName}}</h1>";
var output = Mustache.render(template, person);
document.getElementById('result1').innerHTML = output;

上面的代码是工作，但下面的代码不工作：-
下面这行代码写在我的.html页面中：

<script id="sample_template" type="text/template">
    <h1>{{firstName}} {{lastName}}</h1>
</script>

这一行是写在我的.js文件中的：

var data ={
   firstName: "Christophe",
   lastName: "Coenraets"
};
var template = $('#sample_template').html();
//console.log(template);  this prints the html content in console
var info = Mustache.to_html(template, data);
$('#result1').html(info);

jquery

来源：https://stackoverflow.com/questions/21883079/mustache-js-is-not-working

6条答案

按热度按时间

n3h0vuf21#

我得到的解决方案，我有两个胡子服务器端和客户端，我上面描述的问题是，当我试图填补客户端的占位符，然后这些占位符已经在服务器端消费（因为我没有sperate文件，必须渲染服务器端和谁渲染客户端）.所以他们是没有占位符，而渲染客户端，所以只有我得到的html标签将显示.

赞(0）回复(0）举报 2022-11-22

o8x7eapl2#

从文档来看，.to_html()似乎已被弃用...

赞(0）回复(0）举报 2022-11-22

relj7zay3#

我遇到了与level_0相同的问题。Django在服务器端的模板化也使用了与mustache-js相同的标记，即{{ }}
下面是一个简单的例子，它解决了Django服务器端模板化的问题。

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>

<body>
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
        Hello {% templatetag openvariable %} name {% templatetag closevariable %}
    </script>
    <script>
    $(document).ready(function() {

        var template = $('#template').html();
        console.log(template);
        Mustache.parse(template); // optional, speeds up future uses
        var rendered = Mustache.render(template, { name: "Luke" });
        $('#target').html(rendered);

    });
    </script>
</body>

</html>

赞(0）回复(0）举报 2022-11-22

cyvaqqii4#

如果您像我一样，因为在Google上搜索“Mustache.to_html is not a function”而出现在这个帖子中，您可以简单地将Mustache.to_html替换为Mustache.render。第一个函数已经被删除，因此您可能更新了库。

赞(0）回复(0）举报 2022-11-22

idv4meu85#

这对我很有效：http://jsfiddle.net/evildonald/qK5NT/
js：

$(document).ready(function () {
  var data ={
     firstName: "Christophe",
     lastName: "Coenraets"
  };

  var template = $('#sample_template').html();

  var info = Mustache.to_html(template, data);

  $('#result1').html(info); 
});

HTML格式：

<script id="sample_template" type="text/template">
  <h1>{{firstName}} {{lastName}}</h1>
</script>

赞(0）回复(0）举报 2022-11-22

inb24sb26#

我遇到这个问题是因为我在后端使用了一个templater hbs。我通过在标记中间手动创建一个结构来解决这个问题。
在html中：

<div id="messages"></div>
<script id="message-template" type="x-tmpl-mustache"></script>

创建html：

const messageTemplate = document.querySelector('#message-template');

messageTemplate.innerHTML = `
  <div>
    <p>
    <span class="user_name">{{username}}</span>
    </p>
    <p class="user_message">{{message}}</p>
  </div>
`;

已使用：

const obj = {
  username: message.username,
  message: message.text
};

let html = Mustache.render(messageTemplate.innerHTML, obj);
messages.insertAdjacentHTML('beforeend', html);

赞(0）回复(0）举报 2022-11-22

我来回答

jquery mustache.js 不工作

6条答案

相关问题

热门标签

最新问答

jquery mustache.js 不 工作

6条答案

相关问题

热门标签

最新问答

jquery mustache.js 不工作