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

【问题标题】：Transition views in javascript of a dojo based application基于 dojo 的应用程序的 javascript 中的转换视图
【发布时间】：2014-02-24 13:50:33
【问题描述】：

我有两种情况需要帮助，我认为将它们一起发布会更有效对我自己和其他观众都很有价值。

设置：

   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 文件中并强制隐藏和显示是不可行的。

感谢您的时间和帮助

【问题讨论】：

标签： dojo ibm-mobilefirst worklight-studio

【解决方案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。

【讨论】：

请忽略之前的评论。它格式错误。更新的 Commet：场景 #1 已完成，导致固定的 heaer Div，然后是“ContentPane”，并且 ContentPane 包含如您所描述的以编程方式加载的 View2.html。 View2.html 是一个带有 2 个标签栏按钮的 Div。我可以使用 tabbar 按钮调用 js 文件以再次更新“TransitionViewDiv” ContentPane href = View3.html 并将 View3.html 加载到 ContentPane 中替换 View2.html 吗？这种方法是否可行，并被接受为一种好的做法？非常感谢您的帮助和建议。
有可能。 ContentPane 还呈现您的小部件，只需在单独的视图中定义事件声明即可。但是事件处理程序本身（JavaScript 代码）必须在 MainView.html 中加载（视图中的 JavaScript 被 ContentPane 忽略）。
谢谢。我很感激这个建议。现在正在着手实施。