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

发布于 2024-12-21 04:23:19 字数 336 浏览 1 评论 0原文

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

这是我想要的功能，但它不起作用。我不确定类名何时确定，但被调用者只是元素本身；在这种情况下，它将是

。有没有办法让 className 访问模型？

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

原文

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

That's the functionality I would like, but it doesn't work. I'm not sure when the class name is determined, but the callee is just the element itself; in this case, it would be <div></div>. Is there a way to give className access to the model?

I can, and currently, put another div in my template, in order to control the class, but that div is definitely not needed if I am able to control the class name from the View itself.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

_蜘蛛 2024-12-28 04:23:19

如果是我，我可能会在 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);
    }

If it were me, I'd probably set that type of class within render() use a helper function:

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

You could then reuse applyClass in an event handler later if you need to:

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

回复收藏 0 原文

淡淡绿茶香 2024-12-28 04:23:19

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

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

You need to set the context of the className function by using _.bindAll in the initialize method

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

回复收藏 0 原文

赠意 2024-12-28 04:23:19

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

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

Alternatively, you could avoid className property and use attributes function...

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

回复收藏 0 原文

~没有更多了~