0

バックボーン サブビューのイベント バインディングを理解するのに問題があります。私の見解は次のように定義されています。

TenantView = Backbone.View.extend({
  events: {
    "click": "setActive"
  },
  initialize: function() {
    this.parentEl = this.options.parentEl;
    return this.render();
  },
  template: new EJS({
    url: '/scripts/templates/tenant.ejs'
  }),
  render: function() {
    $(this.parentEl).children('ul').append(this.template.render(this.model));
    return this;
  },
  setActive: function(event) {
    return this.model.set('active', true);
  }
});

テンプレートは単純に を含む で構成されliますa。このようにすると、ビューのクリック イベントがキャッチされず、メソッドsetActiveがトリガーされることはありません。

el私の（2）ビューの1つのようなプロパティでビューを拡張すると、el: 'li'適切に機能し、setActive関数がトリガーされます。2番目のビューはまったく反応しません。ビューの初期化中にプロパティを調べるelと、作業中のビューのelプロパティは rightを指しli、失敗したビューはページでel最初liに見つかったものを指します。

ご覧のとおり、elプロパティの意味に関しては、私は完全に迷っています。

質問は、ビューのクリックをこのまさにビューsetActive関数にバインドするにはどうすればよいですか?

誰か教えてください。

よろしくフェリックス

4

2 に答える 2

2

まず、ドキュメントとこれを読むことができます。についての説明elがあります。

TenantViewhasプロパティと同様parentElに、いくつかの からレンダリングされていると想定していますparent_view。以下のようなアプローチを提案し、試してみます。

var ChildView = Backbone.View.extend({
  tagName : "li", // change it according to your needs

  events : {
    "click": "setActive"
  },

  initialize : function() {
    _.bindAll(this, "setActive");
    // code to initialize child_view
  },

  render : function() {
    // as I'm not familiar with the way you are using template, 
    // I've put simple call to render template, but it should render the
    // content to be kept inside "li" tag
    this.$el.html(this.template()); 

    return this;
  },

  setActive : function(event) {
    // code to be executed in event callback
  }
});


var ParentView = Backbone.View.extend({
  el : "#parent_view_el",

  initialize : function() {
    // parent view initialization code
  },

  render : function() {
    // a place from where ChildView is initialized
    // might be a loop through collection to initialize more than one child views
    // passing individual model to the view

    var child_view = new ChildView();

    this.$("ul").append(child_view.render().$el); // equivalent to this.$el.find("ul")

    return this;
  }
});

それが役に立てば幸い ！！

于 2012-11-07T12:18:22.933 に答える
0

parentElプロパティを導入し、ビュー要素の作成を回避することにより、バックボーンの自然な動作を無効にします。基本的に、ビューの `elz プロパティを何かに関連付けることはありません。

コードが正しければ、これTenantViewはテナントのリスト内の単一のリスト アイテムです。

これTenantViewを行うと、イベントに組み込まれたバックボーンを活用できます。

render: function() {
    this.setElement(this.template.render(this.model));
    $(this.parentEl).children('ul').append(this.$el);
    return this;
}

このsetElement関数は、関数の戻り値を使用templateしてビュー要素を接続し、イベントをセットアップします。ドキュメントではsetElement、プロパティに何かを割り当てるだけでなく、使用することをお勧めしelます。$elビューの要素のキャッシュされた jQuery (または Zepto) オブジェクトを含む気の利いたプロパティもあります。

個人的にバックボーンの方法をさらに進めるには、次のようなものを検討します。

var TenantView = Backbone.View.extend({
    // =========
    // = Setup =
    // =========

    events: {
        "click": "setActive"
    },

    template: new EJS({
        url: '/scripts/templates/tenant.ejs'
    }),

    // =============
    // = Lifecycle =
    // =============

    initialize: function(model, options) {
        this.render();
    },

    render: function() {
        var content = this.template.render(this.model);
        this.$el.html(content);
        return this;
    },

    // ==========
    // = Events =
    // ==========

    setActive: function(event) {
        return this.model.set('active', true);
    }

});


var TenantList = Backbone.View.extend({

    // =========
    // = Setup =
    // =========

    id: "tenantList",
    tagName: "ul",

    // =============
    // = Lifecycle =
    // =============

    initialize: function() {
        this.render();
    },

    render: function() {
        if (this.collection.length > 0) {
            this.renderChildren();
        }
    },

    renderChildren: function() {
        var that = this;

        this.collection.each(function(tenant) {
            that.$el.append(new TenantView(tenant).$el);
        });
    }
});
于 2012-11-07T11:56:38.280 に答える