1

このバックボーン コードを取得しましたが、ビューのイベントが機能しない理由がわかりません。私のアプリケーションは、編集可能なギャラリーであるはずです。#obrazekDetailそこで、html 要素 $( )内にビュー (ギャラリー ビュー) を作成し、ObrazekViews. でイベントをトリガーしたいのですが、機能しObrazekViewません。再度同じような質問をしてすみません。しかし、適切な解決策が見つかりませんでした。バックボーンの JavaScript および HTML コードは次のとおりです。

<table id="obrazekDetail" cellspacing="0" cellpadding="2">
</table>
  <!-- Templates -->
<script type="text/html" id="template-obrazek">
    <tr id="<%= order %>">
        <td><img src="<%= obrazek %>"/>
        </td>
        <td>Nadpis:<input name="nadpis" value="<%= nadpis %>" /></td>
        <td>Popis:<input name="popis" value="<%= nadpis %>" /></td>
        <td><input class="edit" type="submit" name="action" value="Edit" /></td>
        <td><input  class="delete" type="submit" name="action" value="Delete" /></a></td>
    </tr>
</script>

<script type="text/template" id="galerie-template">

</script>

// js code

$(function(){

    window.app = window.app || {};
    window.app.obrazek = new Obrazek();
    window.app.obrazky = new Obrazky();
    window.app.view = new GalerieView();
});


var Obrazek = Backbone.Model.extend({
url : function() {
  return  "/ajax-obrazek/" + this.id + "/";
}
});

var Obrazky = Backbone.Collection.extend({
    model: Obrazek,
    initialFetch: function() {
        var self = this;
        $.each(obrazky_data, function(i, object) {
            var obrazek = new Obrazek();
            obrazek.set({
                id: object.pk,
                nadpis: object.fields.nadpis,
                popis: object.fields.popis,
                order: object.fields.order,
                obrazek: object.fields.obrazek
                 });
            self.model = obrazek;
            self.add(self.model);
        });
    }
});
var ObrazekView = Backbone.View.extend({
    template: _.template($("#template-obrazek").html()),
    events: {
        "click input.edit"   : "edit",
        "click input.delete" : "clear"
    },
    initialize: function() {
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.remove, this);
        console.log(this);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    clear: function() {
        console.log('test');
      this.model.destroy();
    },
    edit: function() {
            console.log('test');

    }

});
var GalerieView = Backbone.View.extend({
    el: $("#obrazekDetail"),

    initialize: function() {
        window.app.obrazky.bind('add', this.addOne, this);
        window.app.obrazky.bind('reset', this.addAll, this);
        window.app.obrazky.bind('all', this.render, this);
        window.app.obrazky.initialFetch();
    },
    render: function() {
        return this;
    },
    addOne: function(obrazek) {
        var view = new ObrazekView({model: obrazek});
        this.$el.append(view.render().el.innerHTML);
    },
    addAll: function() {
          window.app.obrazky.each(this.addOne);
    }
});
4

1 に答える 1

1

これthis.$el.append(view.render().el.innerHTML);を行うと、プレーンな html が抽出され、それらに関連付けられているすべてのイベントが削除されます。を使用してイベントを定義するとき

events: { "click input.edit" : "edit" },

イベントが直接接続されていると思うかもしれinput.editませんが、そうではありません。バックボーンはイベントを el にアタッチし、それをセレクターに一致する子要素にデリゲートします。そのため、実行時に別のinput.edit要素をアタッチしても、イベントは引き続き機能します。

代わりに、この従来の方法を使用するだけthis.$el.append(view.render().el);で、すべてのイベントが維持され、驚くべき結果は得られません!

于 2013-01-05T12:29:20.487 に答える