3

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

4

2 に答える 2

7

attributeプロパティは、結果としてオブジェクトを返す関数として定義できます。したがって、属性を動的に設定できます。

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

お役に立てば幸いです。

于 2013-03-27T13:28:17.730 に答える
5

あなたの問題はここにあると思います：

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

に入れられるものはすべて、最終的に になります。それらはインスタンスにコピーされず、プロトタイプを通じてすべてのインスタンスで共有されます.extend({...})。WorkoutSectionSlide.prototypeあなたの場合の結果は、すべての sattributesによって共有される 1 つのオブジェクトを持つことです。WorkoutSectionSlide

さらに、ビューはオブジェクトの構築attributes中にのみ使用されます。

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

_ensureElement呼び出しは使用するものであり、呼び出されるattributes前に来ることに気付くでしょうinitialize。プロトタイプの動作と組み合わせたこの順序により、ビューの次のインスタンスに属性が表示されます。はattributes実際には静的プロパティを対象としています。this.$el.attr('tooltip', ...)ソリューションは動的属性を処理するための良い方法です。

于 2012-06-28T02:34:02.493 に答える