Mustache JS 和合并模板答案

【问题标题】：Mustache JS and merging templatesMustache JS 和合并模板
【发布时间】：2011-11-10 10:50:44
【问题描述】：

由于某种原因，我无法理解 mustache 模板并将两个模板合并在一起...

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{>passwordStrength}}</div>',
    partials = {
        passwordStrength: '<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>'
    },
    view = {
       email: {
           head: 'Email addresses',
           text: 'are very useful if you use them properly...'
       },
       password: {
           head: 'Password',
           text: 'Put in the password of your choice',

           passwordStrength: {
               weak: 'Weak',
               medium: 'Medium',
               strong: 'Strong'
           }

       }
    };

    $.mustache(template, view['password'], partials['passwordStrength']);

以上似乎不起作用，但它是我所期望的。我想将所有文本内容保留在视图中，以便在此处翻译所有文本。 passwordStrength 'partial/template thingy' 我只想要在呈现密码位时使用。我不太确定这是怎么做的。我试过 {{#passwordStrength}} {{/passwordStrength}} 认为它只会在它存在的情况下呈现，但你必须正确传递部分内容，这就是 {{>passwordStrength}}。我不希望它一直出现......只有当内容也存在时。我做这一切完全错了吗？

我想是说我只希望在满足条件时出现一个模板（我们正在查看密码视图）然后我将逻辑放入我的模板中，这与他们的观点相悖......但是passwordStrength 位应该在模板中，所以我有点困惑这是如何处理的

谢谢，多姆

编辑：Stackoverflow 不允许我回答我自己的问题，我不确定为什么它不允许我这样做，所以我必须用我的答案编辑我原来的问题：

我不需要使用部分...我只需要将 passwordStrength HTML 添加到原始模板并用 {{#passwordStrength}}{{/passwordStrength}} 包装它，这样如果它在那里（就像只有在密码视图中）然后它将呈现 HTML 并使用视图中提供的文本。像这样：

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{#passwordStrength}}<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>{{/passwordStrength}}</div>',
view = {
   email: {
       head: 'Email addresses',
       text: 'are very useful if you use them properly...'
   },
   password: {
       head: 'Password',
       text: 'Put in the password of your choice',

       passwordStrength: {
           weak: 'Weak',
           medium: 'Medium',
           strong: 'Strong'
       }

   }
};

$.mustache(template, view['password']);

【问题讨论】：

标签： javascript jquery templates partials mustache

【解决方案1】：

您最初遇到问题是因为您没有传递整个 partials 对象。 partials 参数应该是一个对象，其键以您的部分命名，值以模板命名。

您自己的答案是正确的，您可以用{{#passwordStrength}} 包装它，以便在数据存在时选择性地显示它。

我在 jsFiddle 中调整了您的原始帖子，以便您可以看到它正在运行-http://jsfiddle.net/maxbeatty/GQ2Fj/

为了让 JS 更容易阅读，我把 HTML 分开了：

<script type="text/html" id="template">
  <div class="thing">
    <h2>{{head}}</h2>

    <p>{{text}}</p>

    {{>passwordStrength}}
  </div>
</script>

<script type="text/html" id="passwd">
  {{#passwordStrength}}
    <div class="pStrength">
        <span>{{weak}}</span>
        <span>{{medium}}</span>
        <span>{{strong}}</span>
    </div>
    {{/passwordStrength}}
</script>

除了传递整个partials对象之外，JS几乎相同：

var template = $('#template').html(),
partials = {
    passwordStrength: $('#passwd').html()
},
view = {
    email: {
        head: 'Email addresses',
        text: 'are very useful if you use them properly...'
    },
    password: {
        head: 'Password',
        text: 'Put in the password of your choice',

        passwordStrength: {
            weak: 'Weak',
            medium: 'Medium',
            strong: 'Strong'
        }

    }
},
html = Mustache.render(template, view['password'], partials);

document.write(html);

【讨论】：