Dijit form horizo​​ntalSlider只是第一次加载？

Question

我正在使用dojo脚本来创建图表，用于缩放和平移我使用了dijit滑块。第一次滑块正确加载，但第二次（从另一页返回后）图表正在加载，除了这些滑块。使用Jquery进行事件处理。刷新页面后它工作正常。

第一次使用CSS

<table>
  <tbody>
        <tr>
        <td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span></td></tr>
        <tr>
        <td>
          <table widgetid="scaleXSlider" id="scaleXSlider" style="width: 450px;" class="dijit dijitReset dijitSlider dijitSliderH" rules="none" data-dojo-attach-event="onkeydown:_onKeyDown, onkeyup:_onKeyUp" role="presentation" border="0" cellpadding="0" cellspacing="0" lang="en">
            <tbody>
              <tr class="dijitReset"><td class="dijitReset" colspan="2">
                <td data-dojo-attach-point="topDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH"></td>
                <td class="dijitReset" colspan="2"></td>
              </tr>

              <tr class="dijitReset">
                 <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderDecrementIconH" style="display:none" data-dojo-attach-point="decrementButton">
                       <span class="dijitSliderButtonInner">-</span>
                    </div>
                 </td>
                 <td class="dijitReset">
                    <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper" data-dojo-attach-event="press:_onClkDecBumper"></div>
                 </td>
                 <td class="dijitReset">
                    <input value="1" data-dojo-attach-point="valueNode" type="hidden">
                        <div class="dijitReset dijitSliderBarContainerH" role="presentation" data-dojo-attach-point="sliderBarContainer">
                          <div style="width: 0%;" role="presentation" data-dojo-attach-point="progressBar" class="dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH" data-dojo-attach-event="press:_onBarClick">
                            <div class="dijitSliderMoveable dijitSliderMoveableH">
                              <div aria-valuenow="1" tabindex="0" aria-valuemax="5" aria-valuemin="1" data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider"></div>
                            </div>
                          </div>
                          <div style="width: 100%;" role="presentation" data-dojo-attach-point="remainingBar" class="dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH" data-dojo-attach-event="press:_onBarClick">
                          </div>
                        </div>
                 </td>
                 <td class="dijitReset">
                   <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper" data-dojo-attach-event="press:_onClkIncBumper"></div>
                  </td>
                  <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderIncrementIconH" style="display:none" data-dojo-attach-point="incrementButton">
                      <span class="dijitSliderButtonInner">+</span>
                    </div>
                  </td>
                </tr>
                <tr class="dijitReset">
                  <td class="dijitReset" colspan="2"></td>
                  <td data-dojo-attach-point="containerNode,bottomDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH">
                  </td>
                  <td class="dijitReset" colspan="2"></td>
                </tr>
              </tbody>
             </table>

，这是第二次，

<table>
    <tbody><tr><td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
    <tr><td>
            <div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" value="1" minimum="1" maximum="5" discretevalues="6" showbuttons="false" style="width: 450px;">
            </div>
    </td></tr></table>

所有的css课程都没有第二次加载。请你帮帮我:(。

Answer 1

Dojo通过指定的id跟踪它创建的对象/小部件。如果在具有相同id的对象上再次运行解析器，dojo会尝试创建第二个实例，但是已经有一个，所以它应该在js控制台中抛出错误。

在再次解析同一页面之前销毁创建的窗口小部件/对象ID。在这里，我已经将'小部件'声明为全局变量，因此如果有任何小部件ID，那么在解析之前就会销毁它们。

if(widgets){
    widgets.forEach(function(widget) {
    widget.destroyRecursive();
});
}
widgets =  dojo.parser.parse();

这对我有用。

有关详细信息，请参阅以下链接

Used dijit css in two pages, but working in first page only, in second page getting blank page