0

我正在页面上使用 Fuel UX Wizard 控件。当使用作为向导控件一部分的上一个和下一个按钮时，我已经能够利用“更改”功能，以及在页面上使用单独的控件触发事件。'change' 事件如此重要的原因是，当用户导航到该步骤时，所有内容都是通过 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'
        });
    });
4

1 回答 1

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 语句的逻辑。

于 2013-12-12T01:12:49.120 回答