0

我正在尝试使用 Backbone.js、require.js 和 jQuery 实现基本页面导航系统的方法；稍后我将添加 jQuery Mobile。我目前也在避免使用 Backbone 模型。它们是学习这一点的另一层复杂性。其目的是最终构建一个当前正在运行的应用程序的窗口内视图，可以在不一次加载整个应用程序的情况下将其换出。

我发现链接工作得很好，并且在使用 jQuery 选择器将事件附加到按钮方面取得了一些成功。this.el但是当我需要将一个值（由于依赖结构，Mainpage 似乎在 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
  };

  });

你好世界主要：

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 渲染后绑定事件来使其工作 - 但我发现如果我尝试使用这些工具构建一个大型应用程序，从长远来看这可能是不合理的。有什么我想念的吗？老实说，我对这些框架工具的使用方式做了一些基本假设，我发誓我会在事后感到愚蠢......

4

1 回答 1

1

您不应该在依赖项本身中初始化 mainPage。而不是return new HelloWorldMaindoreturn HelloWorldMain然后在 defaultAction 中像这样初始化主页mainPage = new HelloWorldMain()（要求您将 mainPage 定义变量重命名为 HelloWorldMain）。之后，您可以使用 mainPage.el 为所欲为。

如果您需要澄清，请发表评论。

于 2012-06-12T08:57:04.557 回答