Question

I’m creating an invitation dialog that allows users to enter emails. Currently in the model I am creating an array to hold the emails:

initialize : function() {
    this.model.set({
        invite_email_array : new Array()
    });
}

And then I’m adding/removing items in the view like so:

this.model.get('invite_email_array').push('[e-mail]');

Then problem is the binder is not being triggered when I either add or remove an email from the model. Here is my binder:

binder : function() {
          model.on("change:invite_email_array", onInviteEmailArrayChange() )
}

The only way I was able to get the binding to trigger was to trigger it manually when I make updates.. an ugly hack

 this.model.trigger("change:invite_email_array");

Any suggestions on a better way to maintain a list of emails and then be able to bind to the object on add/removes?

Thanks

Answer 1

In the example you give, you’re bypassing set by altering the array directly. In order to trigger the change, you would need to set the altered array after pushing the new e-mail. Something to the effect of:

var arr = _.clone(this.model.get('invite_email_array'));
arr.push('[e-mail]');

this.model.set({ invite_email_array: arr });

As soon as you’ve introduced an array, however, it may be worth considering whether the view’s design is really reflecting its intent. Collections (or arrays) of anything often signal that it’s time to consider simplifying models or views. Even though a single e-mail seems too trivial assign to its own view/model, it may make sense to track an array of e-mails as a collection of “invitation” views and watch for changes accordingly.