Question

我有一个把手模板，但我想在这个模板中包含来自两个不同来源的变量。

<script id="notification-menu-item" type="text/x-handlebars-template">

我试图让这两个来源转到相同的模板ID。两个文件都有：

var source                 = $("#notification-menu-item").html();
var template               = Handlebars.compile(source);

但只有一个来源的变量通过模板。反正有一个模板从两个不同的来源获得{{variables}}吗？

编辑：代码

这是模板：

<script id="notification-menu-item" type="text/x-handlebars-template">
    <div id="navmenucontainer" class="container">
        <div id="navmenuv">
            <ul class="nav">
              <li>Topics</li>
              <li>Help</li>
              {{#if logged_user}}
                <li>Notifications</li>
                {{#if pro}}
                <li>My Data</li>
                {{/if}}
              {{/if}}
              </ul>
        </div>
    </div>
</script>

pro来自一个.js文件，logged_user来自单独的.js文件。有没有办法在同一个模板中使用这两个变量？

Answer 1

如果要在将数据传递到Handlebars.compile()函数之前合成数据，您必须以某种方式将模板的呈现集中到一个函数中。我想你将不得不以某种方式保证这些＆＃34;插件＆＃34;的顺序。 js文件调用这个新函数。否则它变成了像这样真实的东西：

示例：

Class1.js

var source = $("#notification-menu-item").html();
var html = Notification.renderNotification(source, logged_user, undefined);
if (typeof html !== 'undefined') {
   $('body').prepend(html);
}

Class2.js

var source = $("#notification-menu-item").html();
var html = Notification.renderNotification(source, undefined, pro);
if (typeof html !== 'undefined') {
   $('body').prepend(html);
}

Notification.js

window.Notification = function() {
   var logged_user = undefined;
   var pro = undefined;
   return {
      renderNotification: function(source, user, isPro) {
         if (typeof user !== 'undefined') {
            logged_user = user;
         }

         if (typeof pro !== 'undefined') {
            pro = isPro;
         }

         if(typeof logged_user !== 'undefined' 
            && typeof pro !== 'undefined') {
               var template = Handlebars.compile(source);
               var html = template({logged_user: logged_user, pro: pro});
               return html;
         }
      }
}

显然这不优雅，远不可维护。虽然没有深入探讨Discourse如何运作的具体细节，但我不确定该告诉你什么。在模板的渲染时，应传递包含所有相关数据的完整对象。对Handlebars.compile()的后续调用将需要完整的数据集。也许应该考虑找到一种方法来拆分这些模板并异步地将它们渲染成单独的页面元素，或者查看Partials

免责声明：我不是JS或无逻辑模板的专家。

把手：2个来源1个模板

1 个答案: