LoginSignup
8

More than 5 years have passed since last update.

Marionette jsの利点

Last updated at Posted at 2015-01-14

Marionette.jsはViewにおいてコードの冗長性をなくしてくれる

Marionette.ItemViewによる削除


var MyView = Backbone.View.extend({
  template: $('#my-view-template').html(),

  render: function(){

    // Underscore.jsのテンプレートをコンパイル
    var compiledTemplate = _.template(this.template);

    // モデルデータを使いテンプレートに描画する
    var data = this.model.toJSON();
    var html = compiledTemplate(data);

    // 描画されたHTMLをビューに埋め込む
    this.$el.html(html);
  }
});

// ビューのインスタンスを生成して、モデルデータを渡す
var Cat = new Person({
  Name: 'Cat',
  email: 'cat@example.com'
});

var myView = new MyView({
  model: Cat
});

myView.render();

$('#content').html(myView.el);


Marionette.jsを使うと上のようなViewの定義を以下のように定義できる


var MyView = Marionette.ItemView.extend({
  template: '#my-view-template'
});


リージョン管理を使ってDOMの要素のなかのビューを綺麗に管理


var Cat = new Person({
  Name: 'Cat',
  email: 'cat@example.com'
});

var myView = new MyView({
  model: Cat
});

myView.render();

// ビューをDOM上に表示
$('#content').html(myView.el);

上記の定義をMarionette.Regionを使用して記述



var myRegion = new Marionette.Region({
  el: '#content'
});
// リージョン内のビューを表示
var myView = new MyView({
  model: Cat
});

myRegion.new(myView)


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
8