Question

骨干的新手，我用琐碎的例子来接近它，但我仍然坚持触发事件。

在我的页面中，我从服务器获取一些数据并用它们初始化视图。然后我可以通过表单更改数据，将它们保存到服务器，然后很快使用新数据更新模板。获取，保存数据并更新视图但我可以通过控制台看到渲染函数有时会被调用两次，有时甚至会被调用4次！而且，对服务器的调用也可以在GET，PUT，GET，GET等时间内完成。

我做错了什么？

<script type="text/x-handlebars-template" id="modelTpl">
<ul>
    <li><strong>Nome:</strong> {{nome}}</li>
    <li><strong>Cogome:</strong> {{cognome}}</li>
</ul>
<input type="text" id="nome" />
<input type="text" id="cognome" />
<a id="changeBtn">Modifica</a>
</script>


Model = Backbone.Model.extend({
    urlRoot: 'server/model.php/model',
    defaults: {
        nome: "",
        cognome: ""
    }
});
var model = new Model({id: 1});

View = Backbone.View.extend({
    el: '#wrapper',
    template: Handlebars.compile($('#modelTpl').html()),
    events: {
        "click #changeBtn": "change"
    },
    initialize: function(){
        this.render();
        this.listenTo(this.model, "change", this.render);
    },
    render: function(){
        console.log('render');
        var self = this;
        this.model.fetch({
            error: function(model, response, options) { },
            success: function(model, response, options) {
                var data = model.toJSON();
                self.$el.html(self.template(data));
            }
        });
        return this;
    },
    change: function() {
        var n = this.$('#nome').val();
        var c = this.$('#cognome').val();
        this.model.save({ nome: n, cognome: c }, {
            error: function(model, response, options) { },
            success: function(model, response, options) { }
        });
    }
});

var view = new View({ model: model });

Answer 1

我知道现在回答这个问题太晚了。但是，它可能对其他人有帮助，因此请尝试_.debounce

this.change = _.debounce(this.change, 300);

骨干事件触发任意次数

1 个答案: