Clever Geek Handbook

The router, model, or view that initiates

I try to be as light a load as possible,

But I'm a puzzle on how to get started, here's my "sequential understanding":

Purpose: create a contact page with contacts that exist on the server

  • Step1: To use the router: must exist <div id="contacts">

    for the rule to run, so I stepped back (Step0.9),
  • Step0.9: Created this div in the body. Okay, the router will find #contacts, Oh, but that's a look, okay, stepped back (Step0.8).
  • Step0.8: Remove the div you created in body

    , replace it instead:
contactsView = Backbone.View.extend 
tagName: 'div',
id: 'contacts'

To be lazy loading, this view should only be created when #contact is triggered in my router table, but I just removed it from the body, does it really exist, I went back to Step1.0 ???

Some tutorials found show the parameters of a global variable ... Please how the general scenario should evolve using router, view, their models and collection (no code required for answer, just one line for each step)

I know there can be multiple ways, but what is the most common step step strategy for creating items.

Thanks in advance.

+3


source to share


2 answers


I'm not 100% sure that I understood you correctly. If I had not asked to let me know in the comments.

There seems to be confusion in your question regarding usage Backbone.Router

in general. When a router maps a route to a URL fragment #contacts

, it has nothing to do with the DOM element with an id #contacts

. The hash sign is simply a CSS and id

CSS snippet identifier , but where the similarity ends.

Usually my router looks something like this:

var AppRouter = Backbone.Router.extend({
  routes: {
    contacts: "contactList"
  },
  contactList: function() {
    var contacts = new ContactCollection();
    var view = new ContactListView({collection:contacts});
    view.render().$el.appendTo("#contacts");
  }
});


Note that the element #contacts

does not need to be called. You can call it #pony

, or you can render the view directly in the document body

if you like.

So in these terms, the workflow is:

  • Router hits
  • The collection is initialized
  • View displayed
+1


source


I usually do



  • Load div#contacts

    inside the body
  • Router maps #contacts

    to a method showContacts

    in the router

  • showContacts creates a view, attaches it to the desired div

    var view = new contactsView();

    $('#contacts').empty().append(view.el);

    view.render();

  • You don't need to define an id in the definition contactsView

+1


source






More articles:


All Articles