Question

我有一个来自后端的用户列表，我将每个用户附加到我的HTML页面，如下所示。我的目标是为每个用户提供javascript评级系统。

<head>
<link href="/css/rateyo.css"/>
<script src="/js/rateyo.js"/>

<script type="text/template" id="mustache-template">

{{#user}}
 <li>
  {{name}}
  <div id="rating"></div>
 </li>
{{/user}}
</script>

<script>
$("#rating").rateYo().on("rateyo.set", function (e, data) {
});
</script>

</head>

<body>
 <ul>
  <!-- All the individual users will be in their own li element here -->
 </ul>
</body>

除了我的评级脚本外，一切正常。它应该在每个用户旁边制作五颗星。但是我听说你不能把脚本放在模板里面，这是对的吗？如果我将<div id="rating"/>移到其他地方，那就像它的意思一样，并显示星星。

我该怎么办？我无法将该脚本放在我的模板之外。

Answer 1

您可以将函数添加到要尝试使用模板解析的对象，然后在模板中调用该函数。

var userlist = {
        user: [
            {name: 'name nameson', doRating: function() {someOtherFunction();}},
            {name: 'some otherguy', doRating: function() {someOtherFunction();}}
        ]
    };

    var someOtherFunction = function() {
        $("#rating").rateYo().on("rateyo.set", function (e, data) {
            //Do stuff?
        });
    }

    <script type="text/template" id="mustache-template">
        {{#user}}<li>{{name}} <div id="rating"></div></li>{{/user}}{{doRating}};
    </script>

或者您当然可以预先计算评分，并实施某种{{user.rating}}并使用它在您的模板中生成。

或者当我仔细观察时，你可以在胡须完成渲染后添加监听器。因为div＃rating将可用（这应该是一个类btw）。

这至少是我的方法。

Mustache.js模板中的Javascript

1 个答案: