I have a view that is supposed to display a single model. By clicking links user can select which model is being displayed. When that happens, and the selected model has fetched, how do I tell view to switch to another model? I see three possible options.
Somehow rebind the view to a new model and refresh it.
Recycle the model object - set the ID of a newly selected model and fetch() it, hoping it will magically get refreshed in a view.
Delete view, then recreate it with a new model (when it has finished fetching).
The first approach feels like the 'right' one, but I can't find an easy way to do it (setting model is easy, but all the events should be rebound for the view to automatically update itself). The second feels weird, might be prone to conflicts (what happens if there are two objects for the models with the same ID?) and might not work at all. The third seems to be too cumbersome. So, what should I do?
You might want consider using the ModelBinder library for Backbone: https://github.com/theironcook/Backbone.ModelBinder
You have two possible ways of refreshing the view. You either bind the Model to the View once, and then always update the properties in the Model later. This ways when the Model attribute changes, the ModelBinder will automaticly update the View.
The other solution would be to unbind the Model from the View, and rebind it to another Model.
This might give you an idea: http://jsfiddle.net/dazqS/ There is a refreshModel function in the view, that unbinds the old modle, and rebinds the new.
refreshModel: function(model){
this._modelBinder.unbind();
this.model = model;
this._modelBinder.bind(this.model, this.el);
}
Related
The consensus I've found while reading articles about Backbone seems to be: don't store stuff in the view, store it in the model and then have the view listen for changes on the model.
If we're talking about a situation where we already have an obvious model-view pairing this is great. E.g., You have a User model and a UserView view. Obviously you set a model property on the view and it listens to changes on its model.
However, let's say I have a view that shows a list of stuff, and there are a couple of buttons to switch between 'list view' and 'grid view'. This is a very common convention I see in apps and websites. Whether I want 'list view' or 'grid view' isn't really relevant to the models/collections themselves; it seems very specific to the view itself.
At first I just tried using a view exactly like a model: setting a property, binding an event 'change:propertyName', and then using someView.set('propertyName'), etc.. to update it... but this didn't work.
While thinking how to approach this, I thought I remembered seeing something like this before:
var MyView = Backbone.View.extend({
...
model: Backbone.Model(),
...
});
So, unlike having, let's say, a UserModel.. we just have some 'typeless' model. Or I guess, I could actually create a new class, maybe called MyViewModel just for this... although I don't see a reason to.
This allows me to bind to the change event like I had wanted to and set view data with someView.model.set(...).
So my question is: is this a common thing that people do in Backbone for view state? Or is there a better way? Thanks.
Do you want the selected display style (list vs. grid) to be used whenever the user visits the page? If so, the simplest solution might be to store that state in localStorage, and have the view class access it directly.
If you don't need the current display style to be remembered, then maybe you don't need to store the state at all. Have the style change when a button is clicked. When the page refreshes, it returns to the default.
If your app has logged-in users with accounts, and you want their choice to persist across all devices they may be using, you need to have something like a UserModel (which has the logged-in user's info and preferences) that records their choice and saves it to the server. Your view can listen for changes on this model.
The beauty of Backbone (to me) is that there isn't a single right way to do something. These ideas are only some of the ways to can handle it.
You could also have a displayStyle property on the collection. I get this idea from sortable tables: in that case, the sort metadata is part of the collection object. When you resort the table by selecting a column heading, you change the collection's comparator and resort it. The view will be listening for the "sort" event and re-render when it occurs. You could do something similar for display style (you can create your own events by doing this.trigger('display-style') in your collection and having the view listen for that event).
Finally, however you decide to manage that state, you should think about whether this should all be one view class or multiple view classes. I think this would depend a lot on the complexity of your application. In many cases, it might be better to have, say, ProductListView and ProductGridView, instead of a single ProductView with two display styles. Splitting them into separate views might even make it easier to add other styles (ProductImageView, maybe?) in the future.
Most Backbone tutorials and examples I've come across suggest something like this for your models:
this.model.on('change', this.render, this);
In my particular case, I'm creating a view for my model that is a form, and the fields are tied to model properties. When the user updates a field on the form, the model should also be updated. This has not been a problem, as I have events bound to the fields that fire off the appropriate code to update my model.
However, the problem I'm running across is that I also want the view to update when the model does (as in the above mentioned ubiquitous change event binding). This is causing the view to re-render itself any time a field is updated, because the underlying model is changing. So now any time I change a value on the form, my view is being redrawn. This is both inefficient, and causing lots of frustrating bugs (like focus being lost).
How is this problem normally handled?
http://backbonejs.org/#Events-catalog
When you don't want your model change to trigger your view's rendering, use {silent: true}. As of the last version of Backbone, this will completely silence the change (it was previously just shut until the next non-silent change). So when the change to your model comes from some user input, use the silent flag.
If you would like to update a model without firing a change event event you can do so by calling,
this.model.set('val', newval, {silent:true});
I'm having an architecture difficulty with application designed in Backbone.
I've got cascaded, hierarchical views, i.e. root view has header, middle and footer views. Each of them consists of some lower level views, e.g. header view consists of tabs, preferences and login/logout views. It's just a view aggregation.
I also have a configuration model, which has several attributes, it's loaded via AJAX (standard backbone fetch). The model attributes are displayed in the interface using popups, menus etc. to enable the user to choose his settings. When the user changes a setting, possibly many parts of the app will have to re-render. The configuration model holds "state" properties (e.g. property currentPeriod is used among periods which were fetched via AJAX)
Inside views, I use listenTo(this.model, 'change:currentPeriod', this.render) to make this view re-render when anything is changed in the configuration.
I set all my default state attributes inside model::parse. The problem is that if I have 10 attributes to set (after parse is over) and probably each of them will trigger some events, many of them will be run multiple times (which is not what I want).
I was looking for a possibility to set current state attributes inside parse with the {silent:true} option - then no events would be triggered. I hope some of you already had the same problem and there exists an easy solution. Thanks in advance!
You can either fire all events "onSet"/"onChange" or none; in other words, you can pass silent: true, or not, but it's a binary choice. You can't say "set foo, and by the way only fire off this event, not that one".
If you want that level of control I'd recommend using silent: true and then manually triggering the events you do want.
If that doesn't work for you, I'd recommend changing how you bind your events, so that you only bind a given event once; that way it won't repeat. And if that doesn't work, you can just make your render method work even if it's run multiple times; that way the event can trigger render multiple times, but it won't hurt anything.
During fetch the reference to options remains the same between parse and set, so you could change the value of options.silent and the changes will carry over.
See this fiddle for an example of this working.
One way to do this would be to create a proxy (a bare Backbone.Events object) and have your views listen to it. The proxy object would listen to all on the model and simply queue up the events fired by the model (eliminating duplicative events) until the model fires an "I'm done" event (which you'd trigger at the end of parse); then the proxy would fire off all the queued events and flush the queue.
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...
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:
View A catches an event
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.
Let's say I have a large collection of Image models and at any one time, only 50 thumbnail views are actually rendered. I want to give the user the option to see another 50 random images from the collection...so I thought of giving each Image model a onDisplay attribute.
The show-random method picks 50 random items and sets onDisplay to true. Some of these items may have already been rendered...if not, then a new thumbnail view is created and attached to the Image model. If the view was already rendered, then it is just redisplayed/attached to the DOM.
The checking of the view's existence seems most easily done if the model has a pointer to it. But am I violating separation of concerns here?
In the MVC design pattern the model should not know anything about the view. This, for example, lets the model to be viewed in more than one way, say either as HTML or rendered in a canvas element.
This can be seen in the following diagram:
The Model can update the View only indirectly, e.g. by firing events.
Image copied from here.
Yeah, I agree, you don't need to couple your model to their views like that.
The onDisplay attribute is good. If all of your Image models are in a collection, then just have another "parent" view listen to changes to the onDisplay attribute on the collection.
If the attribute changes, the "parent" view can then render/remove the thumbnail views (as they will be subviews) as required.
Why don't you make an outside method which handles the caching of views? When the model goes to build a new view, instead of directly constructing it, it would pass the parameters to that outside method.
From the model's perspective, it's calling a generic "give me a view" function. It's that function that handles the caching. You can then change that function to change the behavior, without having to directly modify the model.