2

何らかの理由で、口ひげのテンプレート化と 2 つのテンプレートのマージについて理解できません...

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}} でラップして、そこに IF があるようにするだけです (パスワードのみのように)ビュー) 次に、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']);
4

1 に答える 1

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>

partialsJS は、オブジェクト全体を渡す以外はほとんど同じです。

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);
于 2012-01-19T20:15:54.783 に答える