title: Backbone and require.js: passing values to required files
body: <p>I'm trying to figure a way to implement a basic page navigation system using Backbone.js, require.js and jQuery; I'll be adding jQuery Mobile later. I'm avoiding Backbone models at the moment as well; they're another layer of complexity in learning this. The intent is to eventually build an in-window view of currently running apps that can be swapped out without loading the whole thing at once.</p>
  
  <p>I've found that links work well enough and have had some success in attaching events to buttons with jQuery selectors. But when I need to pass a value ( <code>this.el</code>) from a Router to a View, I find I cannot do so before the page renders- so there is no chance for me to attach events to the buttons prior to them being rendered. It also seems that Mainpage loads and executes before appRouter does due to the dependency structure.</p>
  
  <p>appRouter:</p>
  
  <pre><code>define([
    "jquery",
    "underscore",
    "backbone",
    "helloWorld/HW_form",
    "helloWorld/HW_help",
    "helloWorld/HW_main"
  ], function($, _, Backbone, formPage, helpPage, mainPage) {
    console.log("In AppRouter!!");
    var AppRouter = Backbone.Router.extend({
      routes:{
          // Default
          '*actions':'defaultAction'
      },
  
      defaultAction:function () {
          console.log(this.el);
          mainPage.el = this.el; //Alternatively, I could have passed this.el into mainPage.render()...
      }
  
    });
  
    var initialize = function (target) {
      var app_router = new AppRouter;
      app_router.el = target;
      Backbone.history.start();
    };
    return {
      initialize: initialize
    };
  
    });
  </code></pre>
  
  <p>helloWorldMain:</p>
  
  <pre><code>define([
    "jquery",
    "underscore",
    "backbone",
    "text!templates/helloWorld/helloWorld.html",
    "text!templates/helloWorld/HW_btns.html"
  ], function($, _, Backbone, templateHelloWorld, helloBtns) {
    console.log("In MainPage!");
  
    var HelloWorldMain = Backbone.View.extend({
  
        /*events: {
            "click #helloWorldHelp": "linkHelp",
            "click #helloWorldForm": "linkForm"
        },*/
  
        initialize: function(){
           console.log(this.el);
        },
  
        render: function(target){
          this.el.html(templateHelloWorld);
          //$("#helloWorldHelp").on("click", this.linkHelp);
          //$("#helloWorldForm").on("click", this.linkForm);
        },
  
        linkHelp: function(){
          console.log('Linking to the Help pages!');
        },
  
        linkForm: function(){
          console.log('Linking to the form!');
        }
    });
    return new HelloWorldMain;
  });
  </code></pre>
  
  <p>I did get it to work by binding the events after rendering using jQuery- but I find that may be unsound in the long run if I try to build a large app using these tools. Is there something that I am missing? It honestly feels like I'm making some fundamental assumption about how these framework tools are meant to be used and I'm swear I'm going to feel dumb after the fact...</p>