1

我有这个主干代码，但我无法弄清楚为什么我认为的事件不起作用。我的应用程序应该是一个可编辑的画廊。因此，我在 html 元素 $( ) 中创建了一个视图（画廊视图），#obrazekDetail并使用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但事实并非如此。Backbone 将事件附加到 el 并将其委托给与选择器匹配的子元素。因此，在运行时，如果附加另一个input.edit元素，该事件仍将对其起作用。

因此，只需使用这种传统方式this.$el.append(view.render().el);来维护所有事件并且不会产生令人惊讶的结果！

于 2013-01-05T12:29:20.487 回答