I’m hoping someone can help me with a backbone.js question. I’ve got most of it working but I’m puzzling over aspects of the architecture.
I’ve got a set of results that populate a ‘table’ (it’s actually an unordered list for easier DOM manipulation with more reliable rendering); the results can be filtered via some sliders and checkboxes. I’ve decided that the filtering will simply hide some of the ‘rows’ rather than have the whole ‘table’ redraw.
So with backbone this is a collection of models – all good and working fine so far.
What I want to do is allow people to select (with a checkbox) individual ‘rows’ of the ‘table’ (actually LIs) and have them move themselves into a shortlist area at the top of the page. I’ve achieved this visually by using jQuery .slideOut in the main ‘table’ and then using .slideIn on a .clone of the LI in a separate UL above the main ‘table’. From a UX point of view this all works nicely.
However, I think I’m going wrong by cloning the ‘row’ because the clone is no longer a backbone model and if a user wants to remove it from the shortlist by unchecking it then it must go back into the ‘table’; at this point I don’t know how to tell the model in question to unhide itself because I don’t know how to invoke the model when all I have is the LI as a jQuery object.
Anyway, this feels wrong. Shouldn’t I be somehow displaying the selected models of the collection in the top UL and the unselected ones in the bottom UL? How would I go about doing that? Or do I need two collections and I move models from one to the other?
I feel I’m missing something obvious and would love some help! Thanks in advance for any feedback.
qryss
I think you can make two collections :
So you should have two triggers in the your table view :
And now when you destroy a model in your main collection ( tableCollection ) the model is also removed from you selectedCollection ( if exists there ).