LoginSignup
9

More than 5 years have passed since last update.

[Backbone.js][prequire.js]modelの値をsingletonで引き回す && そのmodelを継承できるようにする

Last updated at Posted at 2013-06-05

やりたかったの

  • backboneのmodelAにあるdefaultsを、それを継承したmodelBmodelCから使いたい。
    • 複数のModelから扱われるため、modelAのattributeはsingletonである必要がある。
    • ※ backbonejsとrequirejsを使っている前提です

最初に書いてた

ModelA
define(
  ["jquery", "underscore", "backbone"],
  function($, _, Backbone) {
    var ModelA = Backbone.Model.extend({
      defaults: {
        "type": "none"
      }
    });
    return ModelA;
  }
);

最初はModelAを素直にこう書いてた。これをModelBModelCで継承して、setgetをする設計にしていた。
ところが、ModelAの要素がsingletonでないので2つの子Modelで別のインスタンスをいじってしまう。

試した

ModelA
define(
  ["jquery", "underscore", "backbone"],
  function($, _, Backbone) {
    return new (Backbone.Model.extend({
      defaults: {
        "type": "none"
      }
    }));
  }
);

これでsingletonにしたが、以下のようにはできない。
var ModelB = ModelA.extend({});
var ModelC = ModelA.extend({});

結局こうした

ModelA
define(
  ["jquery", "underscore", "backbone"],
  function($, _, Backbone) {
  var instance = false;

    var ModelA = function() {
      var obj = Backbone.Model.extend({
        defaults: {
          "type": "none"
        }
      });

      return {
        getObj: function() {
          return obj;
        },
        getInstance: function() {
          if (! instance) {
            instance = new obj();
          }
          return instance;
        }
      }
    }

    return ModelA;
);

これだと以下のような形で継承できる
var ModelB = ModelA.getObj().extend({});
var ModelC = ModelA.getObj().extend({});
また、singletonにした要素を扱うときは以下のようにできる
ModelA.getInstance().set("type", "hoge");

まとめると子モデルはこんな感じになる

ModelB
define(
  ["app/modelA"],
  function(ModelA) {
    var Model_B = ModelA.getObj().extend({
      initialize: function() {
        this.parent = ModelA.getInstance();
      },
      doSomething: function() {
        this.parent.set("type", "hoge");
        console.log(this.parent.get("type")); // hoge
      }
    });

    return ModelB;
  }
);

これで一応当初やりたかったことはできたけど、getObjとかgetInstanceとか限りなくダサい。
それに、なんとなくバッドノウハウのような気がするので、うまいやり方があればぜひ教えてほしい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9