Question

我的视图具有tooltip属性。我想在initialize或render上动态设置该属性。但是，当我设置它时，它会出现在该视图的下一个实例化而不是当前视图中：

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

以下是我初始化视图的方法：

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

如何在当前视图中动态设置attribute（工具提示），以及为什么它会影响 next 视图？

由于

Answer 1

您可以将attribute属性定义为将对象作为结果返回的函数。因此，您可以动态设置属性。

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

我希望它能解决。

Answer 2

我认为你的问题就在这里：

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

您放在.extend({...})中的所有内容最终都会放在WorkoutSectionSlide.prototype中，它们不会复制到实例中，所有实例都会通过原型共享它们。在您的情况下，结果是您有一个由attributes共享的WorkoutSectionSlide个对象。

此外，视图的attributes仅在对象为being constructed时使用：

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之前出现。该顺序与原型行为相结合，是您的属性显示在视图的 next 实例上的原因。 attributes非常适用于静态属性，this.$el.attr('tooltip', ...)解决方案是处理动态属性的好方法。

为下一个实例化设置的骨干视图属性？

2 个答案: