Question

我正在使用页面上的Fuel UX Wizard控件。使用prev＆amp; amp;时，我已经能够利用'更改'功能。作为向导控件一部分的下一个按钮，以及使用页面上的单独控件触发事件。 “更改”事件如此重要的原因是，当用户导航到该步骤时，所有内容都通过ajax加载。

我遇到的问题涉及在向导控件中单击步骤本身时，不会触发“更改”事件，因此未加载内容。我的问题是如何强制wizard.js类中的'stepclicked'事件调用'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;
        }
    });

解决方案：感谢@Michael 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加载，简化了switch语句的逻辑。

Fuel UX向导更改事件

1 个答案: