Question

我正在尝试使用Backbone.js，require.js和jQuery来实现基本页面导航系统;我稍后会添加jQuery Mobile。我现在也在避免使用Backbone模型;他们是学习这一点的另一层复杂因素。目的是最终建立一个当前运行的应用程序的窗口视图，可以在不加载整个内容的情况下进行交换。

我发现链接工作得很好，并且在使用jQuery选择器将事件附加到按钮方面取得了一些成功。但是当我需要将一个值（this.el）从路由器传递给View时，我发现在页面渲染之前我不能这样做 - 所以我没有机会在按钮之前将事件附加到按钮上渲染。由于依赖结构，似乎Mainpage在appRouter之前加载并执行。

appRouter：

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
  };

  });

helloWorldMain：

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;
});

我确实通过使用jQuery渲染后绑定事件来实现它 - 但是我发现如果我尝试使用这些工具构建一个大型应用程序，那么从长远来看这可能是不合理的。有什么东西我错过了吗？说实话，我觉得我正在做一些关于如何使用这些框架工具的基本假设，我发誓我会在事后感到愚蠢......

Answer 1

您不应该在依赖项本身中初始化mainPage。而不是return new HelloWorldMain做return HelloWorldMain然后在defaultAction中初始化主页面，如mainPage = new HelloWorldMain()（要求您将mainPage定义变量重命名为HelloWorldMain）。之后，您可以使用mainPage.el做任何您喜欢的事。

评论是否需要澄清。

Backbone和require.js：将值传递给所需的文件

1 个答案: