ウィザードのコールバックの作成？

Question

私は、ウィザードの各「ステップ」でノックアウトコンポーネントを動的に読み込むノックアウトでカスタムウィザードを構築しています。私はこれをすべて手間をかけずに稼働させることができました。それはかなりうまくいくようです。

ただし、特定のイベントが発生したときにウィザード内にコールバックを実装したいと考えています。たとえば、ナビゲーションの前後に表示されます。

は現在、私のナビゲーション機能の一つは次のようになります。

this.goNext = function() { 
    if (!this.canGoNext()) return; 

    this.currentStep(this.pages()[this.currentIndex() + 1]); 
    this.loadPage(); 
} 

私はbeforePageChangeとonPageChangeと呼ばれる2つのコールバック関数を構築したいと思います。

私の一般的な仮定は、beforePageChangeは、いくつかのパラメータ、特に現在のページと次のページを渡すということです。しかし、私はまた、他のどのクラスからでもウィザードを使用することができるようにしたいと思っています。ウィザードは、そのナビゲーションコマンドを実行し、適切なコールバックをトリガーするターンで

this.wizard = Site.loadWizard(arguments); 
this.wizard.beforePageChange(function(options) { 
    if (!options.currentPage.complete) return false; 

    // do stuff 
    return true; 
}); 

：

例えば、私の親ページに私のようなものを持っているでしょう。

私はここに根本的に欠けているものがあるように感じます。

編集

次のように私の現在のバージョンでは動作します：ウィザードで

：ウィザードを実行するページで

this.canChangePage = ko.obserable(true); 
this.beforePageChange = function (options) { 

}; 

this.beforePageChangeHandler = function (options) { 
    this.beforePageChange(options); 
    // do stuff 
    return true; 
}; 

this.onPageChange = function (options) { 

}; 

this.onPageChangeHandler = function (options) { 
    this.onPageChange(options); 
    //do stuff 
    return true; 
} 

：

this.wizard = Site.loadComponent(params, function() { 
    this.wizard.beforePageChange = function (options) { 
     this.canChangePage(false); 
    }; 
}.bind(this)); 

私はthを実装するためのより良い方法があるかどうかわからないまたは、これが最善の解決策であるかどうか。

すでにwizardインスタンスへのアクセス権を持っているので、あなたはそのcurrentStep、観察を購読することができます（私は思う）自分のコメントに記述

Answer 1

ソリューションTomalak。変更する前に通知を受け取るには、3番目のパラメータ："beforeChange"を渡します。 （2番目はコンテキストthisです）。

var Wizard = function() { 
 
    this.currentStep = ko.observable(0); 
 
} 
 

 
Wizard.prototype.next = function() { 
 
    this.currentStep(this.currentStep() + 1); 
 
} 
 

 
Wizard.prototype.prev = function() { 
 
    this.currentStep(this.currentStep() - 1); 
 
} 
 

 
var Page = function() { 
 
    this.wizard = new Wizard(); 
 
    
 
    this.wizard.currentStep.subscribe(function(oldStep) { 
 
    console.log("Page work before step change from step", oldStep); 
 
    }, this, "beforeChange"); 
 
    
 
    this.wizard.currentStep.subscribe(function(newStep) { 
 
    console.log("Page work after step change to", newStep); 
 
    }); 
 
    
 
} 
 

 
ko.applyBindings(new Page());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="with:wizard"> 
 
    <button data-bind="click: prev">back</button> 
 
    <span data-bind="text: currentStep"></span> 
 
    <button data-bind="click: next">next</button> 
 
    
 
</div>