javascript - バックボーン：ルート前

Question

Google には多くのトピックがありますが、完全で実用的な例はありません。

条件を確認し、必要に応じてナビゲーションをキャンセルできるように、ルーターのナビゲーションをラップするにはどうすればよいですか?

PS _.wrap、Backbone.Router.prototype.route のオーバーライドなどのアイデアが見られますが、完全な例はありません。また、backbone-route-filterを見ましたが、アプリケーションに統合する方法がわかりません。

Answer 1

Backbone.history.route のオーバーライドを試すことができます:

var bbhRoute = Backbone.history.route;
Backbone.history.route = function(route, callback) {
  return bbhRoute.call(Backbone.history, route, function(fragment) {
    // if (decide if you want to prevent navigation) {
    //    window.history.back(); // to ensure hash doesn't change
    //    return;
    // }

    // if you want to let it happen:
    return callback.apply(this, arguments);
  });
};

Answer 2

それを得るために、Backbone.Router を拡張しました。私のルーターがお役に立てば幸いです。プロパティ toEvaluate をルートごとの前提条件とともに追加し、evaluateRoutesFn を追加して、いくつかのルートをナビゲートする前にそれらを評価する関数を追加しました。

私のルートの例は次のとおりです。

var MySubRouter = Backbone.ModuleRoute.extend({
      //hasPermissions is static
      //if you want a function of an instance you can use a function instead

      evaluateRoutesFn: SomeView.hasPermissions,

      toEvaluate: {
          routeA: {
              modulePreconditions: [SomeView.CONDITION_A, ...]
          }
      },

      routeA: function(param1, param2) {
          //the route to navigate with preconditions
      },

アクセス許可を持つメソッドは、true または false またはエラーを返します。

var MyView = ModuleView.extend({}, {
    CONDITION_A: "conditionA",
    hasPermissions: function (condition, properties) {
          switch (condition) {
              case MyView.CONDITION_A:
                  return app.ConditionA;
              default:
                  return true;
          }
    }
});

さらに重要なのは ModuleRoute です。ここに、私の moduleRoute のベースがあります。さらにいろいろ追加しました。エラー制御のように。アプリの各モジュールに現在のすべてのルートを保存しました...その他。必要なものは何でも追加できます。本当に便利です。

  Backbone.ModuleRoute = Backbone.Router.extend({
      evaluateRoutesFn: null,
      toEvaluate: null,

      constructor: function (prefix, options) {
          this._finalRoutes = {};
          Backbone.SubRoute.prototype.constructor.call(this, prefix, options);
      },

      onRoutes: function (route) {
          var aps = Array.prototype.slice;
          var args = aps.call(arguments);
          args.shift();
          var routeName = this.routes[route];

          var evalResult = true;
          try {
              var toEval = this.toEvaluate && this.toEvaluate[routeName];
              if (toEval) {
                  evalResult = this.evalPreconditions(toEval.modulePreconditions, args);
                  //more future preconditions
              }
          }
          catch (err) {
              evalResult = false;
          }

          if (evalResult)
              try {
                  this._finalRoutes[route].apply(this, args);
              }
              catch (err) {
                  window.history.back(); //go back, error control...
              }
          else
              window.history.back(); //no permissions, go back
      },

      evalPreconditions: function (preconds, args) {
          if (!this.evaluateRoutesFn) {
              throw "WARNING: Evaluate routes function must be overriden to evaluate them. " +
                    "Don't assign toEvaluate if you won't do it. The evaluation has been skipped.";
          }
          if (!preconds)
              return true;

          var evalResult = true;
          for (var i = 0, len = preconds.length; i < len; i++) {
              evalResult = this.evaluateRoutesFn(preconds[i], args);
              if (!evalResult) {
                  throw "ERROR: The precondition is not truth.";
                  break;
              }
          }
          return evalResult;
      },

      route: function (route, name, callback) {
          this._finalRoutes[route] = (!callback) ? this[name] : callback;
          var that = this;
          callback = function (path) {
              return function () {
                  var aps = Array.prototype.slice;
                  var args = aps.call(arguments);
                  args.unshift(path);
                  that.onRoutes.apply(that, args);
              };
          } (route);
          return Backbone.Router.prototype.route.call(this, route, name, callback);
      }
  });