9

渡されるモデルごとに新しい div を作成するバックボーン ビューがあります。ただし、ビューでイベントを発生させることはできません (a.change-status をクリックします)。ビュー内の要素もテンプレートから生成されているためだと思います。これを回避する方法があれば教えてください。

var videoDivView  = Backbone.View.extend({
el: '<div class="vendor-video" />',
initialize: function(){
    _.bindAll(this);
    this.render();
    this.model.on('change:published', this.enableSaveButton);
},
events: {
    'click a.change-status'     : 'changeVideoStatus'
},
template: video_tmpl,
render: function(){
    this.$el.attr("id", 'video-'+this.model.id);
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.data('status', video_statuses[this.model.get('published')]);
},
changeVideoStatus: function(e) {
    console.log(this.model);
    return false;   
}, 
enableSaveButton: function() {
    $('#save-changes').removeClass('disabled').removeAttr('disabled');
}
});

テンプレートの例は次のようになります。

<script id="single-video-tmpl" type="text/x-jquery-tmpl">
<div>
    <div class="video-info">
        <span class="video-title"><%=video_title%></span>
        <div class="bottom-info">
            <a href="#<%=id%>" class="change-status"></a>
        </div>
    </div>

</div>
</script>
4

4 に答える 4

8

問題の原因である可能性があるいくつかのことがあります。

まず第一に、あなたのel宣言は疑わしいようです。そのクラスの div が必要な場合はclassName、バックボーン ビューのデフォルトが であるため、属性を定義するだけですdiv。

それ以外の：el: '<div class="vendor-video" />'

ちょうど使用：className: 'vendor-video'

ビューの初期化方法に関する詳細はわかりませんが、ビューを初期化してからコンテナーにレンダリングすることをお勧めします。

var yourVideoDivView = new videoDivView({model: model});
$("#your-video-container").html(yourVideoDivView.render().el)

return this;また、render メソッドで必要な最後の行の作業を取得するためにも。

render: function(){
  ...
  return this;
}

の使用についてthis.delegateEvents()は、ビューがすでに にある後にこの関数を呼び出す必要がありますDOM。そうしないと意味がありません。すなわち:

$("#your-video-container").html(yourVideoDivView.render().el)
yourVideoDivView.delegateEvents();

delegateEvents()ビューイベントを再び有効にします。

于 2013-08-28T09:42:45.703 に答える
0

tagName と this.$el を使用した追加で私が観察した問題は、選択された tagName で作成された最後の要素のイベントをイベント リスナーがアタッチできなかったことです。しかし、要素をDOMに追加した後に this.delegateEvents() を使用すると、問題は解決しました。

于 2014-11-23T11:21:45.450 に答える