0

环顾四周，但找不到任何有用的东西，所以..

我有一个带有联系人卡片视图的 Backbone.js 联系人模型。此视图有许多输入，您可以在其中编辑联系人信息。

我在页面上有许多其他表单不是主干模型，所以他们使用“保存按钮”来保存。我基本上希望这个保存按钮也能触发Contacts.CardView.saveCard();（可能是FileApp.cardView.saveCard as well?——我的一些代码在下面。

有没有办法做到这一点？我以为我可以使用以下内容，但似乎它不会将事件绑定到视图之外的任何内容？：

events: {
    "change input": "change",
    "click #save": "saveCard"
},
$('#save').click(function() {
    FileApp.cardView.saveCard;
    _SAVE.save();
})

卡片视图

window.Contacts.CardView = Backbone.View.extend({

    events: {
        "click #save": "saveCard" // doesnt work because #save is outside the view?
    },

    saveCard: function(e) {
        this.model.set({
            name:$('#name').val()
        });
        if (this.model.isNew()) {
            var self = this;
            FileApp.contactList.create(this.model, {
                success:function () {
                    FileApp.navigate('contacts/' + self.model.id, false);
                }
            });
        } else {
            this.model.save();
        }

        return false;
    }
}

路由器：

var FileRouter = Backbone.Router.extend({
    contactCard:function (id) {
        if (this.contactList)  {
            this.cardList = new Contacts.CardCollection();
            var self = this;
            this.cardList.fetch({
                data: {
                    "id":id
                },
                success: function(collection, response) {
                    if (self.cardView) self.cardView.close();
                    self.cardView = new Contacts.CardView({
                        model: collection.models[0]
                    });
                    self.cardView.render();
                }
            });

        } else {
            CONTACT_ID = id;
            this.list();
        }
    }
});

var FileApp = new FileRouter();
4

1 回答 1

4

一种选择是为这种情况创建自己的事件对象：

// Before initializing views, etc.
var formProxy = {};
_.extend(formProxy, Backbone.Events);

// Add the listener in the initialize for the CardView
window.Contacts.CardView = Backbone.View.extend({
  initialize : function() {
    formProxy.on('save', this.saveCard, this);
  },
  saveCard: function() {
    this.model.set({
        name:$('#name').val()
    });
    if (this.model.isNew()) {
        var self = this;
        FileApp.contactList.create(this.model, {
            success:function () {
                FileApp.navigate('contacts/' + self.model.id, false);
            }
        });
    } else {
        this.model.save();
    }
    return false;
  }
}

// Save
$('#save').click(function() {
   formProxy.trigger('save');
});

请参阅：http ://documentcloud.github.com/backbone/#Events

于 2012-04-30T01:15:10.073 回答