Question

I’m new to Backbone.js and am having trouble figuring out the proper architecture for a model-view relationship.

I have a view that holds an input box and a model that is supposed to take the contents of that input box and send it to the server.

My issue is that I don’t always have a discreet DOM event that triggers a request for the view to update the model data, such as input.change. Sometimes the code itself needs to ask the model to send updates to the server.

I’ve thought of three solutions to this problem so far, I’m not sure if any if them are any good though:

• Update the model on the input element’s keypress event

• Once the view is initialized with the model, have the view update/add a function to the model called ‘get_input_value()‘ that returns the value of the input box

• Whenever the application needs to request the model to update the server, first call a function in the view that updates all of the information that the user has typed into the view to the model.

Please bear in mind that this is a simplified example. The view contains child views as well, all of which hold a number of elements that the user can manipulate, the model needs to be updated with all of this information so that it can update the server.

Any help and input is appreciated! Thanks so much!

Edit :::

Base on machineghost’s response, I now see that I did not articulate this problem correctly:

There is a DOM event, but the problem is that it doesn’t necessarily originate from inside the view that uses the model. It may originate from the Router or another view and be triggered by a global event handler. Additionally, there is not a 1:1 View-Model relationship. This model is used by multiple views who express the model in different ways. So in this case, it seems like the command to update the server should not go through a View, but to the model itself. If that is the case, the model must be able to say “Sync me with my views!”.

But I don’t know how to do this without breaking the rules and thus creating other problems with architecture…

Answer 1

Ok this is kind of a subjective question, so forgive me if this just seems like me spouting off my two cents. And before I even answer your question, I have to admit I’m a bit skeptical that you:

don’t always have a discreet DOM event

because pretty much anything the user can do triggers an event that you can watch for. For instance, if you want to wait until a user changes a text input there’s change, but also (as you noted) the various key* events, plus there’s blur (which is commonly used for this sort of thing). Between the 3(+) you should always be able to respond appropriately to the user’s actions. It would only be if (say) you had to save the text input’s contents every 3 seconds that it would truly be independent of DOM events.

So, without knowing your particulars, I just have to point out that something smells fishy there. But anyhow, as for your actual question, here’s my take on your ideas:

Update the model on the input element’s keypress event

This certainly would work, but just be sure to use the view to do the actual event handling/model setting; hooking up the onKeyPress handler in the model would be a bad idea

Overall this approach seems pretty standard, and fits the Backbone paradigm.

Once the view is initialized with the model, have the view update/add a function to the model called ‘get_input_value()’ that returns the value of the input box

I don’t quite get how this helps your problem, plus it seems to put the concerns in the wrong place: the model should (ideally) have nothing to do with the DOM.

Whenever the application needs to request the model to update the server, first call a function in the view that updates all of the information that the user has typed into the view to the model.

Is the save happening every 5 minutes or something? If not, then it’s presumably happening in response to the user’s actions, and you should use an event handler to respond.

However, if you truly do need to make the sync independent of user actions, I’d recommend using a custom event to manage things. In other words, in your model’s sync method put something like this.trigger('preSync'). Then, every view which uses that model can bind some sort of updateMyModelValue method, ie. this.model.on('preSync', this.updateMyModelValue, this);.

This way, your model code is never directly interacting with the DOM at all; instead, it just worries about the stuff it’s supposed to worry about (the data) and the views pay attention for when they need to update that data from the DOM.

Hope that helps.

* EDIT (in response to your editing of your question) *

If that is the case, the model must be able to say “Sync me with my views!”.

The general Backbone way for a model to say … well, pretty much anything to its views is through events.

(Technically you could maintain a list of a model’s views in the model itself, and then iterate through that list to tell the views to do things. Backbone is even un-opinionated enough to let you do that. However, from a maintainability standpoint that seems like a terrible approach to me.)

My example of a “presync” event (above) demonstrates how you’d use this technique; comment back if any of it is unclear.

Similarly, if you have an issue of:

1. View A catches an event
2. View B needs to do something in response to that event

You basically have two options:

1) You can tightly couple the two views. Let’s say have a table view that creates row views, but needs to respond to events that happen in those rows. You can pass the table itself as an option to the row when you create it (new Row({table:this})), and then when those rows need to tell their table “an event happened” they can just do this.options.table.informThatAnEventHappened(). This is a great approach if the two views are inherently related, like a table and its rows. If not, a better approach is:

2) You can use events to communicate between the views. Let’s say you have a title div at the top of the page, which needs to be updated whenever a “title” text input changes … but that text input is way down the page and doesn’t conceptually have much to do with the page’s title (apart from setting it). The common point between these two elements (and their views) is the data, the text of the title itself.

Now imagine that titleDivView and titleSettingInputView both share a pageTitle model. When titleSettingInputView calls this.model.set('titleText', 'newTitle'), the titleDivView can listen for this.model.on('change:titleText', ...), and re-render itself appropriately in response. In this way two totally un-connected, de-coupled views can interact with each other, without creating a tangled web of inter-related code.

And of course, if there isn’t a nice convenient “change:title” event to bind to, you can always make your own, as with the custom “presync” event I described above.