燃料UX向导更改事件

Question

我正在使用页面上的燃料UX向导控件。在使用作为向导控件一部分的prev & next按钮以及在页面上使用单独的控件触发事件时，我已经能够使用“Change”函数。“更改”事件之所以如此重要，是因为当用户导航到该步骤时，所有内容都是通过ajax加载的。

我遇到的问题涉及在向导控件中单击步骤本身时，“change”事件不会被触发，因此不会加载内容。我的问题是如何强制wizard.js类中的“逐步单击”事件也调用“change”事件，以便加载内容，最好不更改任何wizard.js文件。

$("#MyWizard").wizard().change(function(e, data) {
        switch (data.step) {
        case 1:
            if (data.direction == "next") {
                GetExclusionLoad();
            }
            break;
        case 2:
            if (data.direction == "previous") {
                GetRevenueLoad();
            } else if (data.direction == "next") {
                GetWithholdingLoad();
            }
            break;
        case 3:
            if (data.direction == "next") {
                GetProcessBeginLoad();
            } else if (data.direction == "previous") {
                GetExclusionLoad();
            }
            break;
        case 4:
            if (data.direction == "next") {

            } else if (data.direction == "previous") {
                GetWithholdingLoad();
            }
            break;
        }
    });

解决方案:多亏了“Mikowski”，我才能通过一些小的改变来解决这个问题。

        var onChangeWizard, onClickWizard, onDirectionWizard, $myWizard,
        stateMap = {
            wizard_step_idx: 1,
            wizard_direction_str: 'next'
        };

    onChangeWizard = function(event, data) {
        var stepIdx = data.step || 1;
        var directionStr = data.direction || '';

        if (directionStr === 'next' && stepIdx < 4) {
            stepIdx++;
        } else if (directionStr === 'previous' && stepIdx > 0) {
            stepIdx--;
        }

        // save state      
        stateMap.wizard_step_idx = stepIdx;
        stateMap.wizard_direction_str = directionStr;

        switch (stepIdx) {
        case 1:
            GetRevenueLoad();
            break;
        case 2:
            GetExclusionLoad();
            break;
        case 3:
            GetWithholdingLoad();
            break;
        case 4:
            GetProcessBeginLoad();
            break;
        }
    };

    $myWizard = $('#MyWizard');

    $myWizard.on('change', function(event, data) {
        onChangeWizard(event, {
            step: data.step,
            direction: data.direction
        });
    });
    $myWizard.on('stepclick', function(event, index) {
        onChangeWizard(event, {
            step: index.step,
            direction: 'click'
        });
    });

Answer 1

如果我正确理解，您应该能够将处理程序打包到一个函数中，然后将其绑定以进行更改并单击，如下所示：

var
  onChangeWizard, onClickWizard, $myWizard,
  stateMap = { 
    wizard_step_idx      : 1,
    wizard_direction_str : 'next'
  };

onChangeWizard = function ( event, data ){
  var 
    step_idx      = data.step      || 1;
    direction_str = data.direction || '';

  if ( direction_str === 'next' && step_idx < 4 ) {
    step_idx++;
  }
  else if ( direction_str === 'previous' && step_idx > 0 ){
    step_idx--;
  }

  // save state      
  stateMap.wizard_step_idx      = step_idx;
  stateMap.wizard_direction_str = direction_str;

  switch( step_idx ) {
    case 1 : loadRevenue();      break;
    case 2 : loadExclusion();    break;
    case 3 : loadWithholding();  break;
    case 4 : loadProcessBegin(); break;
  }
};

onClickWizard = function ( event ) {
  onChangeWizard( event, {
    step      : stateMap.wizard_step_idx,
    direction : stateMap.wizard_direction_str
  });
  return false;
};

$myWizard = $('#MyWizard');

$myWizard.on( click, onClickWizard );
$myWizard.wizard().change( onChangeWizard );

上面的示例假定单击向导内容将按照用户先前选择的方向继续进行。但是，您可能想让它一直向前推进。

通过首先计算步骤更改，然后请求AJAX负载，可以简化开关语句的逻辑。