Усы JS и шаблоны слияния - PullRequest
Новая
       23

Усы JS и шаблоны слияния

2 голосов
/ 05 сентября 2011

по какой-то причине я не могу разобраться в шаблонах усов и объединении двух шаблонов вместе ... 

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 «частичная / шаблонная штука», которую я хочу получить только при отображении бита пароля.Я не совсем уверен, как это должно быть сделано.Я пытался {{#passwordStrength}} {{/ passwordStrength}} подумать, что он будет рендериться только в том случае, если он существует, но тогда вам нужно также передать и частичное, и это {{> passwordStrength}}.Я не хочу, чтобы это появлялось все время ... только когда контент там тоже есть.Я делаю все это совершенно неправильно?

Полагаю, я хочу сказать, что я хочу, чтобы шаблон появлялся только при выполнении условия (мы смотрим на представление пароля), а затем я добавляю логику в свои шаблоны, что противоречит их сути.... но бит passwordStrength должен быть внутри шаблона, поэтому я немного запутался, как это обрабатывается

Спасибо, Dom

Редактировать: Stackoverflow не позволит мне ответить на мойсвой вопрос, и я не уверен, почему он не позволил бы мне сделать это, поэтому мне придется отредактировать свой исходный вопрос с моим ответом:

Мне не нужно использовать частичные ... Япросто нужно добавить HTML-код passwordStrength в исходный шаблон и обернуть его {{#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']);

1 Ответ

1 голос
/ 20 января 2012

У вас изначально были проблемы, потому что вы не проходили весь объект partials.Параметр partials должен быть объектом с ключом, названным в честь вашего партиала, и значением с шаблоном.

Вы правы в своем собственном ответе, что вы можете заключить его в {{#passwordStrength}}, чтобы при желании отобразить егоданные существуют.

Я изменил ваш исходный пост в jsFiddle, чтобы вы могли видеть, как он работает - http://jsfiddle.net/maxbeatty/GQ2Fj/

Я выделил HTML, чтобы JS было легче читать: 

<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>

JS почти идентичен, за исключением прохождения всего объекта partials: 

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);
...