Databases
StackOverflow2013
Postsdbo
POBackbone.js Approach to Managing UI State / Handling Selections in UI
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.js Approach to Managing UI State / Handling Selections in UI
    primarykey
    data
    text
    <p>My question deals with this UI sample.</p> <p><img src="https://i.stack.imgur.com/dH8bx.png" alt="enter image description here"></p> <p>Having trouble with approach to managing the "selected" state of various UI view components. For example, I have menus above from which the user makes various selections. These selections should cause updates in the menus themselves (HL selected items) and also cause updates in the results, which would be based on the selections made. Also, the menus have different kinds of rules. For example, you can only have one "list" selected at a time, but you can have multiple "tags" selected.</p> <p>One approach that I was thinking about was to create a Backbone model that holds the state of the UI "selection". For example, I could have a model SearchCriteria that holds this information. Then, when a user makes choices in the UI, I could update this model. I could have the various view components listen for changes in this model (as well as changes in the primary data models.) Then, the views would update their visual state by updating which items are shown as selected.</p> <p>One item I am struggling with in this approach is who should be responsible for updating the selected state of an item. For example, on the list of tags, I might have the following pieces defined...</p> <ul> <li>Tag (model to represent a tag)</li> <li>TagCollection (collection to represent a collection of tags)</li> <li>TagMenuView (view that represents the menu of tags available to select)</li> <li>TagMenuItemView (view that represents a single item in the menu)</li> </ul> <p>Should I...</p> <ul> <li>Set up an event listener on the TagMenuItemView for click, and then try to handle 1) updating the SearchCriteria model, and 2) updating the visual state of the menu, e.g. selected items?</li> <li>Or, should I have the higher level view (the TagMenuView) listen for events such as the user selecting a tag, and perform the work there?</li> <li>Also, the tags menu in this example allows multiple items to be selected, but the lists menu would only allow one list at a time to be selected. Where would this "UI" rule (or is this really a business rule related to a search?) be enforced? For example, if I listened for click events on each individual list menu item, I could certainly update the visual state of that item, but, I also need to make sure the higher level menu view deselects any other selected lists. So, would it be better to manage the "UI" state of something like the to-do list menu in the view that would represent that entire menu (a ToDoListMenuView) rather than on each individual menu item view?</li> </ul> <p>Sorry for so many questions. I am just having a hard time moving to this model of development.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USKevin
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBackbone.js Approach to Managing UI State / Handling Selections in UI
      1. USJuraj Ivan
      1. VTFavorite
    2. VO
      singulars
      1. POBackbone.js Approach to Managing UI State / Handling Selections in UI
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBackbone.js Approach to Managing UI State / Handling Selections in UI
      1. USjelbourn
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload