1

i've got Backbone.View to change background of the $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()});
                }
            });
        });
    }
});

when click on .svs-upload-background i'm calling Popup/Media template with media:

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

for changing images, i've got similar Backbone.View that call's the same Popup/Media on .svs-upload-image click:

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()});
                }
            });
        });
    }
});

Here is the problem: I need to display a different header titles in my Popup/Media template for background and Image, like:

if background:

<% if(' **code needs to be here** '){%>
   <div class="background_header">Changing background</div>
<% } %>

if image:

<% if(' **code needs to be here** '){%>
   <div class="image_header">Changing image</div>
<% } %>

what i need paste instead of 'code needs to be here' ? big thanks for everyone!

1 Answer 1

2

As I understand your question, you're not asking for a duplicate of something like this, because you're looking to tailor the answer to your code, and don't simply have a question about syntax.

You question is not very clear, but I'm assuming that the basic problem is that nothing in your data model differentiates the two kinds of views, and you want to know how to tell the difference between a background view and an image view at the template render level. You have two options:

  1. Have your view pass a variable explicitly identifying the origin type to the data model and then test that variable in the template.
  2. Make two different templates.

I'd recommend option 1 for DRY purposes. I hope this answers your question, but it is hard to give you a good answer because your question is not very clear.

1
  • you want to know how to tell the difference between a background view and an image view at the template render level - yes! you right, thx for the answer, i'll think about this.
    – 20yco
    Feb 22, 2015 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.