YOSHINO日記

プログラミングに関すること

Ember.js入門4: mixinでコードをDRYに記述する

Rubyでいうと、classにmoduleをincludeするのとすごく似ている。

app/app.js

myObject.jsはincludeする必要がある。

import Application from '@ember/application';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
import myObject from './myObject'

const App = Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

myObject();
export default App;

mixinするobjectを定義する。

app/mixins/common.js

import Ember from 'ember';

export default Ember.Mixin.create({
  property1: 'This is a mixin property',
  edit: function(){
    console.log(('Starting to edit'));
    this.set('isEditing', true);
  },
  isEditing: false
});

mixinsをして、そのプロパティを呼び出す。

app/mObject.js

import EmberObject from '@ember/object';
import Ember from 'ember';
import common from './mixins/common';

export default function() {
  const Object = EmberObject.extend(common,{
    objprop: 'This is an Ember object property'
  });

  const obj = Object.create();

  console.log(obj.get('objprop'));
  console.log(obj.get('property1'));
}

ここでログの出力は以下のようになる。

This is an Ember object property
myObject.js:16 This is a mixin property