Question

var myView = Backbone.View.extend({
    tagName: 'div',
    className: function() {
        return this.model.isNew() ? 'new' : 'old';
    }

这是我想要的功能，但它不起作用。我不确定何时确定类名，但被调用者只是元素本身;在这种情况下，它将是<div></div>。有没有办法给className访问模型？

我可以，并且目前在我的模板中放置另一个div，以便控制该类，但如果我能够从View本身控制类名，则绝对不需要div。

Answer 1

如果是我，我可能会在render()中设置这种类型的类使用辅助函数：

var myView = Backbone.View.extend({
    render: function() {
        this.applyClass();
        return this;
    },

    applyClass: function() {
        var isNew = this.model.isNew();
        $(this.el)
            .toggleClass('new', isNew)
            .toggleClass('old', !isNew);
    }
});

如果需要，您可以稍后在事件处理程序中重用applyClass：

    initialize: function(options) {
        this.model.bind('change', this.applyClass, this);
    }

Answer 2

您需要在initialize方法中使用_.bindAll来设置className函数的上下文

var myView = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'className');
  },
  tagName: 'div',
  className: function() {
    return this.model.isNew() ? 'new' : 'old';
  }
});

Answer 3

或者，您可以避免className属性并使用attributes函数...

var myView = Backbone.View.extend({
    tagName: 'div',
    attributes: function() {
        return { "class": this.model.isNew() ? 'new' : 'old'
            };
    }
});

查看渲染：是否有更好的方法来控制视图元素的类名？

3 个答案: