0

バックボーンを使用して、Webサービスを単一ページのWebアプリに移植しています。div#contentヘッダー、ビューを添付する空、フッターで構成される基本的なレイアウトがあります。

すべてのルートは、対応するビューを作成し、div#content以前にレンダリングされたビューを新しいビューに置き換えるためにそれをアタッチします。

require.jsバックボーンアプリとその依存関係を読み込むために使用しています。すべてのバックボーンコードは非常に小さく、ルーターとビューのみを使用しているため、ファイルは1つだけです。util.jsこのAMDモジュールは、ビューで使用されるファイルエクスポート機能に依存しています。ビューが作成およびレンダリングされた後、必要なユーティリティ（jqueryのもの、ajaxなど）をから実行しますutil.js。

問題は、ビューをレンダリングするとユーティリティが呼び出され、別のルートに移動して新しいビューが作成されると、新しいビューのユーティリティが呼び出されますが、古いビューのユーティリティはまだ実行されているということです。

ある時点で、5つのビューのようなユーティリティが完全に実行され、競合が発生することがあります。

stop/startユーティリティが何らかのサービスとして機能する方法が必要なので、私のアプローチが十分ではないことは明らかです。

現在のアプローチを示す関連コードを貼り付けます。

require(["utilities"], function(util) {
...
Application.view.template = Backbone.View.extend({
  el: "div#content",
  initialize: function(){
    this.render();
  }, 
  render: function(){
    var that = this;
    // ajax request to html
    getTemplate(this.options.template, {
      success: function(template) {
        var parsedTemplate = _.template( template, that.options.templateOptions || {});
        that.$el.html(parsedTemplate);
        // execute corresponding utilities
        if(that.options.onReady) {
          that.options.onReady();
        }
      },
      error: function(template) {
        that.$el.html(template);
      }
    })
  }
});
...
Application.router.on('route:requestPayment', function(actions) {  
  var params = { template: 'request-payment', onReady: util.requestPayment };
  var view = new Application.view.template(params);
});       
...

});

util.requestPaymentテンプレートを機能させるために必要なすべてのものを備えた関数で構成されています。

この問題をどのように処理すればよいか混乱しています。私が明確であったことを願っています、そしてどんな提案や助けもありがたいです。

編集： utilities.jsスニペット：

..。

var textareaCounter = function() {
  $('#requestMessage').bind('input propertychange', function() {
    var textarea_length = 40 - $(this).val().length;
    if(textarea_length === 40 || textarea_length < 0) {
      $('#message-counter').addClass('error').removeClass('valid');
      $("#submitForm").attr('disabled', 'disabled');
    }
    else if(textarea_length < 40 && textarea_length > 0) {
      $('#message-counter').removeClass('error');
      $("#submitForm").removeAttr('disabled');
    }
    $('#message-counter').text(textarea_length);
  });
}
...    
var utilities = utilities || {};
...
utilities.requestPayment = function() {      
  textareaCounter();
  initForm();
  preventCatching();
  requestPaymentCalcFallback();
};
...
return utilities;
...
4

1 に答える 1

1

現在アクティブなビューへの参照をアプリのどこかに保存することをお勧めします。

ここで新しいビューを作成します：

var view = new Application.view.template(params);

ただし、後でこの変数にアクセスすることはできません。したがって、それは存在しますが、停止/削除/削除することはできません。

私たちが通常行うことは、アプリ全体を初期化し、すべてを管理する親アプリクラスを持つことです。requirejsのすべてのモジュールはそれに依存します。新しいルートがナビゲートしているときに、親アプリクラスにビューを変更するように依頼します。古いビューを削除し、新しいビューを作成し、div＃contentにデータを入力して、その参照を保存します。

古いビューを削除すると、すべてのユーティリティがそれに応答しなくなると思います。

stopListeningそれでもイベントの呼び出しに問題がある場合は、ビュー参照を削除する前にイベントバインダーを使用する必要がある場合があります。

于 2013-02-25T08:33:17.980 に答える