Question

我在淘汰赛中构建了一个自定义向导，可以在每个＆＃34;步骤＆＃34;中动态加载淘汰组件。向导我设法让所有这些工作没有太多麻烦，而且似乎工作得很好。

但是，我想在某些事件发生时在向导中实现一些回调。例如，在导航之前和之后。

目前，我的导航功能之一如下：

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

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

我想构建两个名为beforePageChange和onPageChange的回调函数。

我的一般假设是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));

我不确定是否有更好的方法来实现这一点，或者这是否是最佳解决方案。

Answer 1

他们评论中描述的解决方案Tomalak（我认为）：

由于您已经可以访问currentStep实例，因此您可以订阅其"beforeChange"可观察对象。要在更改之前收到通知，请传递第三个参数：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>

TRUST Slimline Design Tablet for MAC #15908

为向导编写回调？

1 个答案: