燃料UX嚮導更改事件

Question

我正在使用燃料UX嚮導控制頁面。在利用屬於嚮導控件一部分的下一個按鈕時，我可以利用「更改」功能，並且可以使用頁面上的單獨控件觸發事件。 '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; 
     } 
    }); 

解決方案：感謝@邁克爾米科夫斯基我能夠弄清楚一些小的變化。

 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); 

上面的例子假定點擊在嚮導內容將繼續與用戶以前選擇的方向。但是，您可能希望始終堅持下去。

switch語句的邏輯通過首先計算step change然後請求AJAX load來簡化。