Backbone.Viewに突っ込んでみる

2013-02-25T00:00:00+00:00 Backbone.js JavaScript

Backbone.Collection、Backbone.Modelときて、んでもってBackbone.Viewに突っ込んでみる

var App = {
  "Models": {
    "Sample": Backbone.Model.extend({ "urlRoot": "/entry" })
  },
  "Views": {
    "Index": Backbone.View.extend({
      "el": $("#content"),
      "render": function() {
        var m = new App.Models.Sample({ id: 1 });
        m.fetch({
          "success": _.bind(
            function(model) {
              new App.Views.Label({ model: model }).render(this.$el);
            },
            this
          )
        });
      }
    }),
    "Label": Backbone.View.extend({
      "tagName": "h2",
      "attributes": {
        "class": "label"
      },
      "render": function(parentView) {
        this.$el.text(this.model.escape("name"));

        parentView.append(this.$el);
      }
    })
  }
};

(function() {
  new App.Views.Index().render();
})();

Backbone.View.extendする際にelを指定するかtagNameで指定するかで何が変わるのか、恐らくはBackbone.View._ensureElementな所の処理が変わるのではっていう所かと。el指定の場合だと、attributesとかで指定しても特に何かをされる訳では無い模様なので、attributesとかでクラスを指定しても反映されないっていう事になるんじゃないかと

で今日のBackbone.View関係調査なツイート

でtagNameなBackbone.Viewのインスタンスを生成する際に引数にBackbone.Modelとかを取る場合には

new App.Views.Index(model).render();

ではなく

new App.Views.Index({ "model": model }).render();

とかにすべきかも。そうしないと前者の場合だとmodelの内部データが属性として認識する。そうあるべきな場合を除いてはやるべきじゃないのかも...

とりあえずBackbone.ViewはAPIが少ないのもあり、特に突っ込みどころはあんまり無かった的な感じじゃないかなっと

Backbone.jsのRouter/Historyを使ってみる Backbone.Modelに突っ込んでみる