Динамическое назначение различных шаблонов на основе данных — с помощью вспомогательного или пользовательского тега

Я отображаю шаблон jsrender в объекте шаблона.

var colorTmpl = {
     "color": jQuery.templates("<span>{{:~val}}</span>"),
}
var jsrendertmpl = {};
jQuery.extend(jsrendertmpl, colorTmpl);

Если я получу доступ к jsrendertmpl.colorTmpl.render(), он отобразит цветовой шаблон. Если я включу этот тег шаблона tmpl в другой шаблон, подобный этому

{colorArr: ["white", "blue", "black"]}

{{for colorArr tmpl="jsrendertmpl.colorTmpl"/}}

Он не будет включать этот подшаблон в родительский шаблон. Поэтому я добавляю пользовательский тег, чтобы включить этот подшаблон в объект

includetmpl: function(tmplname){
            return Template.render(tmplVal, jObj);
},

Если я включу подшаблон в родительский шаблон, {{:~val}} не будет распознан

Родительский шаблон с настроенным включенным тегом

{{for colorArr itemVar='~val'}}
      {{includetmpl "color"}}
{{/for}}

Родительский шаблон без подшаблона (отлично работает)

{{for colorArr itemVar='~val'}}
      <span>{{:~val}}</span>
{{/for}}

Есть ли способ получить доступ к этому значению. Я использовал {{setvar}} и {{:~getvar}} в качестве обходного пути, но мне нужно постоянное решение.

Заранее спасибо.


jquery-templates jsrender
person Dineshkani    schedule 25.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Есть несколько способов реализовать этот сценарий — например, предоставить разные шаблоны на основе параметра данных, который вы передаете.

Например, вы можете передать шаблон в качестве помощника:

$.views.helpers("myTemplates", {
    color: $.templates("<span>{{:}}</span>"),
    colorVal: $.templates("<span>{{:~val}}</span>")
});

И использовать его как в

{{for colorArr tmpl=~myTemplates.color/}}

или если выбранный вами шаблон tmplVar: "color"

{{for colorArr tmpl=~myTemplates[tmplVar]/}}

Вы также можете создать собственный тег, как вы предлагаете, одним из следующих способов:

$.views.tags("includetmpl", {
    init: function(tagCtx) {
        this.template = myTemplates[tagCtx.props.template];
    }
});

or

$.views.tags("includetmpl2", {
    render: function(val) {
        return myTemplates[this.tagCtx.props.template].render(val, this.ctx);
    }
});

(Обратите внимание, как я передаю контекст также и моей функции рендеринга во второй версии, так что ~val будет доступно...)

Затем используйте его, как показано ниже:

{{for colorArr}}{{includetmpl template="color"/}}{{/for}}

or 

{{for colorArr itemVar="~val"}}{{includetmpl template="colorVal"/}}{{/for}}

См. https://jsfiddle.net/BorisMoore/coezx8xj/ для всего вышеперечисленного...

Я изменю название вашего вопроса, чтобы сделать его более понятным.

person BorisMoore    schedule 25.02.2016