2

これは、メイン ビュー内でサブ メニューを機能させるのに適しています。

構成バインディングに activate: true を追加することで、サブメニュー ビューモデルに対して activate() 関数を機能させることができました。ただし、他のライフサイクルイベントは発生していません。サブビューモデル内で canActivate()、canDeactivate()、deactivate() を機能させるにはどうすればよいですか?

ソース コードについては、私の投稿の上部にあるリンクを参照してください。このリンクされた質問への回答には、この機能をホット タオル プロジェクトに統合するために使用した例が含まれています。

4

2 に答える 2

2

@evan-larsen がinAboutactivator() を構築した方法は、canDeactivate および Deactivate イベントの実行を妨げているようです。理由はまだわかりません。

代わりに使用するように変換することでsystem.acquire、これらのイベントを再び発生させることができました。

return system.acquire(convertSplatToModuleId(activationData.splat)).then(function( Sample ) {
       App.inAbout(new Sample());
   });

これが変更された about/index.js です。

define(
  ['durandal/system', 'durandal/viewModel', 'durandal/plugins/router'],
  function( system, viewModel, router ) {
      var defaultPage = 'aboutUs';

      function convertNameToModuleId ( name ) {
          return 'deepLinkingExample/areas/about/' + name + '/' + name;
      }

      function convertSplatToModuleId ( splat ) {
          if ( splat && splat.length > 0 ) {
              return convertNameToModuleId(splat[0]);
          }
          return convertNameToModuleId(defaultPage);
      }

      var App = {
          inAbout: viewModel.activator(),

          activate: function( activationData ) {

                  return system.acquire(convertSplatToModuleId(activationData.splat)).then(function( Sample ) {
                      App.inAbout(new Sample());
                  });
          },

          showPage: function( name ) {
              return function() {
                  router.navigateTo('#/about/' + name);
              };
          },

          isPageActive: function( name ) {
              var moduleName = convertNameToModuleId(name);
              return ko.computed(function() {
                    return this.inAbout().__moduleId__ === moduleName;
              }, this);
          }
      };

      return App;
  }
);

上記のコードは、返された詳細 VM が ctor であることを前提としています。以下のような aboutMe.js がそれを行うはずです。

define(['durandal/app', 'durandal/system'], function (app, system) {

    var ctor = function() {
           this.name = "About me";
           this.description = "For demonstration only";
       };

       ctor.prototype.canActivate = function () {
           return app.showMessage('Do you want to view ' + this.name + '?', 'Master Detail', ['Yes', 'No']);
       };

       ctor.prototype.activate = function() {
           system.log('Model Activating', this);
       };

       ctor.prototype.canDeactivate = function () {
           return app.showMessage('Do you want to leave ' + this.name + '?', 'Master Detail', ['Yes', 'No']);
       };

       ctor.prototype.deactivate = function () {
           system.log('Model Deactivating', this);
       };

       return ctor;
});
于 2013-05-11T16:26:45.557 に答える
0

ドキュメント によるとactivate: true、完全なライフサイクルイベントは追加されません

注: ケース 3 と 4 は、canActivate および activate コールバックのみを強制するため、少し異なります。非アクティブ化のライフサイクルではありません。これを有効にするには、自分で完全なアクティベーターを使用する必要があります (ケース 1 または 2)。

したがって、サブメニューを制御する完全なアクティベーターを作成する必要があります。例として、https ://github.com/BlueSpire/Durandal/blob/master/App/samples/knockout/index.js#L6をご覧ください。

要するに：

define(['durandal/viewModel'], function (viewModel) {

    return {
        activeSample:viewModel.activator(),
        ...
于 2013-05-09T19:47:05.840 に答える