Question

我有两个需要帮助的场景，我认为将它们放在一起会证明更多对我自己和其他观众都很有价值。

设定：

   Worklight 6.1
   dojo 1.9

Application:
   MainView.html  (Contains Body, and a transition Div, and NorthSouthView.js script reference)
   View1.html (Contains a single Div that displays and unordered list
   View2.html (Contains a single Div that Displays <p> data, and also plays audio)
   View3.html (Contains a single Div that Displays instructional information)

  application-descriptor  <mainFile> MainView.html </mainFile>

  All of the views are stored together in the application. There are no external http queries made by the application.  All view transitions are local to the application.

场景＃1：

   At application start the MainView.html  is invoked by worklight.  Anticipated format::

   <body>
      <div>
         <h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1> 
      </div>

      <div  id="TransitionViewDiv">

           /* Would like to load content of View1.html, View2.html, or View3.html here */

      </div>
     <script>SetView.js</script>
</body>

Description + Questions:

When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed.  (View1, View2, or View3).  The goal is to keep SSheader fixed at the top of the screen at all times. Only    TransitionViewDiv  would update.

问题：

1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?.  I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.

2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv?  Keep in mind that each view View1, 2, and 3  are defined as individual Div's.

欣赏完成上述方法的任何建议，或欢迎任何有关完成转换的最佳实践的建议。

场景＃2：

作为上述方案1的后续内容。成功加载View1,2或3后，视图将定义按钮，这些按钮将导致转换到剩余视图中的另一个视图。因此，如果在SetView.js中，决定在View2中滑动显示，View2 将有想要加载的按钮，例如View3.html。

描述+问题：

1）从View2.html加载View3.html的最佳方法是在按钮单击时使用moveTo，还是按钮使用回调来调用javascript以使转换类似于用于加载初步观点？

了解有关管理存储在独立文件中的多个视图的最佳做法的任何建议。最后，该应用程序将包含超过15个ViewXX.html文件，每个文件包含一个Div。基于此，将所有视图放在一个html文件中并强制隐藏和显示是不可行的。

感谢您的时间和帮助

Answer 1

要加载HTML片段（View1.html，View2.html或View3.html），您可以使用dojox/mobile/ContentPane。此小组件允许您提供可用于指定视图位置的href属性。

您也可以稍后再次设置href属性来更改它，例如：

registry.byId("myContentPane").set("href", "View2.html");

您应该保留div#TransitionViewDiv并以编程方式向其添加dojox/mobile/ContentPane，或使用声明性语法并添加以下属性：

 <div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>

您的第二个场景与第一个场景不同。在第一个中，您实际上有 1个视图，多个片段，而在第二个场景中，您有多个视图。

如果您只有1个视图，则无法转换到其他视图（没有视图）。因此，如果您想使用转换，则无法使用dojox/mobile/ContentPane。

但是，如果你有单独的视图，那么这意味着你需要将标题移动到每个视图（因为它们是它的一部分）。对于这些，更复杂的情况，我认为你应该看看dojox/app模块。这包含了很多适合您的MVC代码，您唯一需要做的就是配置它。

如果您对dojox/app模块不感兴趣，可以尝试继承视图。您可能想看一下我提供的this answer。在该答案的评论部分，您还可以找到更详细的JSFiddle。在此示例中，标头实际上是继承的。我还写了一篇更详细的文章来处理this case。

在基于dojo的应用程序的javascript中转换视图

1 个答案: