0

Backbone.js、require.js、jQueryを使用して基本的なページナビゲーションシステムを実装する方法を見つけようとしています。後でjQueryMobileを追加します。現在、バックボーンモデルも避けています。これらは、これを学習する上でのもう1つの複雑さの層です。最終的には、すべてを一度にロードせずにスワップアウトできる、現在実行中のアプリのウィンドウ内ビューを構築することを目的としています。

リンクは十分に機能し、jQueryセレクターを使用してボタンにイベントをアタッチすることにある程度成功していることがわかりました。しかしthis.el、ルーターからビューに値（）を渡す必要がある場合、ページがレンダリングされる前に渡すことができないことがわかります。そのため、ボタンがレンダリングされる前にイベントをボタンに添付する機会がありません。また、依存関係の構造により、メインページは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を使用してレンダリングした後、イベントをバインドすることで機能させることができましたが、これらのツールを使用して大規模なアプリを作成しようとすると、長期的には不健全になる可能性があります。足りないものはありますか？正直なところ、これらのフレームワークツールがどのように使用されるのかについて基本的な仮定をしているように感じます。そして、事後には馬鹿げていると確信しています...

4

1 に答える 1

1

依存関係自体でmainPageを初期化しないでください。return new HelloWorldMaindoの代わりにreturn HelloWorldMain、defaultActionでこのようにメインページを初期化しますmainPage = new HelloWorldMain()（mainPage定義変数の名前をHelloWorldMainに変更する必要があります）。その後、mainPage.elを使用して好きなことを行うことができます。

説明が必要な場合はコメントしてください。

于 2012-06-12T08:57:04.557 に答える