Использование if в backbone/underscore шаблоне, как?

Question

[Макс Павлюкевич]

Есть Backbone.View чтобы менять бэкграунд у $el:

var Background = Backbone.View.extend({
    className: 'svs-widget svs-widget-animate',
    events:{
        'click .svs-upload-background': 'media'
    },
    initialize: function(){

    },
    render: function(){
        this.$el.append(_.template(_background).apply(this.options));
        return this.$el;
    },
    media: function(){
        var me = this;   

        require(['View/Popup/Media'], function(_Media){
            $.ajax({
                url: '/svs-ajax.php',
                type: 'post',
                data: {
                    'action':                   'change_bg'
                },

                success: function(data){
                    var media   = new _Media({model: data, popup: popup, target: me.options.background});
                    var popup   = new Popup({content: media.render()});
                }
            });
        });
    }
});

Соответственно при клике на .svs-upload-background я вызываю Popup/Media шаблон с необходимым медиа:

<% if(this.data.length > 0){ %>
 <div class="MediaList">
    <img/>
 </div>
<% } %>

Для изменения изображения, я использую похожий Backbone.View который вызывает такой же Popup/Media шаблон по клику на .svs-upload-image

var Image = Backbone.View.extend({
    className: 'svs-widget svs-widget-animate',
    events:{
        'click .svs-upload-image':  'media'
    },
    initialize: function(){

    },
    render: function(){
        this.$el.append(_.template(_image).apply(this.options));
        return this.$el;
    },
    media: function(){
        var me = this;   

        require(['View/Popup/Media'], function(_Media){
            $.ajax({
                url: '/svs-ajax.php',
                type: 'post',
                data: {
                    'action':                   'change_image'
                },

                success: function(data){
                    var media   = new _Media({model: data, popup: popup, target: me.options.image});
                    var popup   = new Popup({content: media.render()});
                }
            });
        });
    }
});

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

Если бэкграунд:

<% if(' **какой код нужен здесь?** '){%>
   <div class="background_header">Изменения бэкграунда</div>
<% } %>

Если изображение:

<% if(' **какой код нужен здесь?** '){%>
   <div class="image_header">Измнение изображения</div>
<% } %>

на что мне нужно заменить какой код нужен здесь?, спасибо огромное!

Answer 1

[aen]

Вьюшка должна работать с моделью. Заведите в вашей модели одно свойство, которое будет отвечать за тип попапа. В шаблоне проверяйте значение этого свойства и согласно ему рисуйте то, что вам надо.
<% if (type) {} %>

Comments

[Константин Китманов]

Заводить в модели тупо вьюшное свойство как-то не комильфо. Может, лучше передавать в конструктор Popup дополнительный параметр, который потом передавать в _.template?

[aen]

Константин Китманов: комильфо или моветон - это решать только топикстартеру, контекста мы не знаем. Проброс параметра в шаблон можно сделать и так. Если модель нужна только для рендеринга, то в нее можно спокойно завести дополнительное поле, а если модель синхронизируется с сервером, то конечно же этого делать нельзя. В таком случае параметр придется пробросить через конструктор.

[Константин Китманов]

aen: в такой формулировке согласен. Поскольку ТС, очевидно, новичок, это надо было озвучить.

[Макс Павлюкевич]

aen: Константин прав, я новичок в backbone, исполнитель слинял и оставил на меня невыполненный проект, каким образом я могу завести свойство? вплане как это должно выглядеть, если не трудно, благодарю!

[Алексей Уколов]

> aen: Если модель нужна только для рендеринга, то в нее можно спокойно завести дополнительное поле, а если модель синхронизируется с сервером, то конечно же этого делать нельзя.

Именно для таких целей существует плагин https://github.com/asciidisco/Backbone.Mutators