Extend a view or use a mixin in Ember.js

Question

I would like to include standard functionality in several views within an Ember app. The functionality includes things like setting the tagName and classNames of the views to be the same and keeping track of a property for each view.

The question in a nutshell: Should I use a mixin or extend a base view?

The expanded question...

Should one extend a base view to do this? For example:

App.BaseView = Em.View.extend({
    tagName: 'section',
    classNames: ['page_section', 'blue'],
    willInsertElement: function() {
        // Some functions called here that set properties
    },
});

App.PageOneView = App.BaseView.extend({
    // View specific stuff here
});

App.PageTwoView = App.BaseView.extend({
    // View specific stuff here
});

... Or, should one use a Mixin to extend the functionality? For example:

App.BaseMixin = Em.Mixin.create({
    tagName: 'section',
    classNames: ['page_section', 'blue'],
    willInsertElement: function() {
        // Some functions called here that set properties
    },
});

App.PageOneView = Em.View.extend(App.BaseMixin, {
    // View specific stuff here
});

App.PageTwoView = Em.View.extend(App.BaseMixin, {
    // View specific stuff here
});

I understand that views and mixins are both Ember objects, but does using either of them to extend standard functionality to other objects (e.g. views) affects how the objects and prototypes/instances (if they differ from the object) interact and whether properties get set on the instance of the view or the view object?

If the two examples above differ, would setting the properties on the mixin's init function change anything? For example:

App.BaseMixin = Em.Mixin.create({
    tagName: null,
    classNames: null,
    init: function() {
        this.set('tagName', 'section');
        // And so forth...
    },
});

However, if using a mixin and extending a view have the same affect on the views I am trying to add the standard functionality to (that is, they affect the views' objects and prototypes/instances in the same way), do you see an advantage to using one over the other (whether in terms of efficiency, maintainability, etc)?

Answer 1

Great question,

Short and simple, extend the view.

1. The hooks/bindings are view specific, so the mixin can't be applied to a controller, route etc, and depending on your team makeup, you don't want to give someone an opportunity to mix in code that doesn't belong.

2. Extending a class in Ember just makes the base class into a mixin and applies it to your class. https://github.com/emberjs/ember.js/blob/v1.2.0/packages/ember-runtime/lib/system/core_object.js#L488

So it's almost the exact same thing, only your base view makes more sense since it only really applies to views.