javascript - Backbone View Attribute set for next Instantiation? - Stack Overflow

admin管理员组

文章数量:1287643

I have a view that has a tooltip attribute. I want to set that attribute dynamically on initialize or render. However, when I set it, it appears on the next instantiation of that view instead of the current one:

    var WorkoutSectionSlide = Parse.View.extend( {      
        tag : 'div',
        className : 'sectionPreview',
        attributes : {},

        template : _.template(workoutSectionPreviewElement),

        initialize : function() {
//          this.setDetailsTooltip(); // doesn't work if run here either
        },

        setDetailsTooltip : function() {
            // build details
            ...

            // set tooltip
            this.attributes['tooltip'] = details.join(', ');
        },

        render: function() {            
            this.setDetailsTooltip(); // applies to next WorkoutViewSlide

            // build firstExercises images
            var firstExercisesHTML = '';
            for(key in this.model.workoutExerciseList.models) {
                // stop after 3
                if(key == 3)
                    break;
                else
                    firstExercisesHTML += '<img src="' +
                        (this.model.workoutExerciseList.models[key].get("finalThumbnail") ?
                                this.model.workoutExerciseList.models[key].get("finalThumbnail").url : Exercise.SRC_NOIMAGE) + '" />';
            }

            // render the section slide
            $(this.el).html(this.template({
                workoutSection : this.model,
                firstExercisesHTML : firstExercisesHTML,
                WorkoutSection : WorkoutSection,
                Exercise : Exercise
            }));


            return this;
        }
    });

Here is how I initialize the view:

// section preview
$('#sectionPreviews').append(
    (new WorkoutSectionPreview({
        model: that.workoutSections[that._renderWorkoutSectionIndex]
    })).render().el
);

How can I dynamically set my attribute (tooltip) on the current view, and why is it affecting the next view?

Thanks

I have a view that has a tooltip attribute. I want to set that attribute dynamically on initialize or render. However, when I set it, it appears on the next instantiation of that view instead of the current one:

    var WorkoutSectionSlide = Parse.View.extend( {      
        tag : 'div',
        className : 'sectionPreview',
        attributes : {},

        template : _.template(workoutSectionPreviewElement),

        initialize : function() {
//          this.setDetailsTooltip(); // doesn't work if run here either
        },

        setDetailsTooltip : function() {
            // build details
            ...

            // set tooltip
            this.attributes['tooltip'] = details.join(', ');
        },

        render: function() {            
            this.setDetailsTooltip(); // applies to next WorkoutViewSlide

            // build firstExercises images
            var firstExercisesHTML = '';
            for(key in this.model.workoutExerciseList.models) {
                // stop after 3
                if(key == 3)
                    break;
                else
                    firstExercisesHTML += '<img src="' +
                        (this.model.workoutExerciseList.models[key].get("finalThumbnail") ?
                                this.model.workoutExerciseList.models[key].get("finalThumbnail").url : Exercise.SRC_NOIMAGE) + '" />';
            }

            // render the section slide
            $(this.el).html(this.template({
                workoutSection : this.model,
                firstExercisesHTML : firstExercisesHTML,
                WorkoutSection : WorkoutSection,
                Exercise : Exercise
            }));


            return this;
        }
    });

Here is how I initialize the view:

// section preview
$('#sectionPreviews').append(
    (new WorkoutSectionPreview({
        model: that.workoutSections[that._renderWorkoutSectionIndex]
    })).render().el
);

How can I dynamically set my attribute (tooltip) on the current view, and why is it affecting the next view?

Thanks

• javascript
• backbone.js
• backbone-views

Share Improve this question Follow edited May 31, 2013 at 9:35 Philipp Kyeck 18.9k1919 gold badges8888 silver badges125125 bronze badges asked Jun 27, 2012 at 23:51 GarrettGarrett 11.7k2020 gold badges8686 silver badges129129 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can define attribute property as a function that returns object as result. So you're able to set your attributes dynamically.

var MyView = Backbone.View.extend({
    model: MyModel,
    tagName: 'article',
    className: 'someClass',
    attributes: function(){
        return {
            id: 'model-'+this.model.id,
            someAttr: Math.random()
        }
    }
})

I hope it hepls.

I think your problem is right here:

var WorkoutSectionSlide = Parse.View.extend( {      
    tag : 'div',
    className : 'sectionPreview',
    attributes : {} // <----------------- This doesn't do what you think it does

Everything that you put in the .extend({...}) ends up in WorkoutSectionSlide.prototype, they aren't copied to the instances, they're shared by all instances through the prototype. The result in your case is that you have one attributes object that is shared by all WorkoutSectionSlides.

Furthermore, the view's attributes are only used while the the object is being constructed:

var View = Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  this._configure(options || {});
  this._ensureElement();
  this.initialize.apply(this, arguments);
  this.delegateEvents();
};

The _ensureElement call is the thing that uses attributes and you'll notice that it es before initialize is called. That order bined with the prototype behavior is why your attribute shows up on the next instance of the view. The attributes is really meant for static properties, your this.$el.attr('tooltip', ...) solution is a good way to handle a dynamic attribute.

本文标签： javascriptBackbone View Attribute set for next InstantiationStack Overflow