Dojo:在单页应用程序中交换两个不同的视图

我是dojo的新手，我想做以下事情：

假设你有一个单页的应用程序，但你有两个视图，它们是完全不同的。例如，一个视图是一个起始页，它只会填充Bordercontainer中心。第二个视图看起来更像一个标准的Web应用程序，在Bordercontainer顶部有一个标题，在Border Container左侧有一个菜单，在BordersContainer中心有一些内容。

如果现在调用了index.html（单页应用程序），我希望首先出现起始页。应该有一个onclick事件。有了这个事件，视图应该会改变。这意味着开始页面将消失，并显示第二个webapp视图。

实现这一点的最佳方式是什么？

我想用两个BorderContainer。第一个Bordercontainer将在区域中心包含起始页。第二个Bordercontainer将包含Web应用程序视图（顶部、左侧、中间）。现在是否可以用第二个Bordercontainer交换起始页的方式，从第一个Bordercontainer交换中心区域？这会是解决我的方法吗？如果是的话，我需要某种可以交换视图的控制器。我可以使用dojo.wire解决这个问题吗？

或者在道场中有没有一种直接的方法，我还没有找到？如果有一个小的例子或教程，收到它的链接会很好

感谢每一个提示。

您应该看看dojox/mobile(http://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html)它支持您尝试做的事情。您也可以查看dojox/app(http://dojotoolkit.org/reference-guide/1.10/dojox/app.html或http://dojotoolkit.org/documentation/tutorials/1.9/dojox_app/contactsList/)看看这是否能满足你的需求。

我尝试了以下代码：

require([
  "dijit/form/Button"
], function() {
  changeView = function(idShow, idHide) {
    var showView = dojo.byId(idShow);
    var showHide = dojo.byId(idHide);
    if (showView.style.display == 'block') {
      showView.style.display = 'none';
      showHide.style.display = 'block';
    } else {
      showView.style.display = 'block';
      showHide.style.display = 'none';
    }
  };
});

#view1 {
  display: block;
}
#view2 {
  display: none;
}

<html>
<head>
  <title>Change View</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
</head>
<body class="tundra">
  <div id="view1">
    View1
    <br>
    <button dojoType="Button" widgetId="view1Button" onClick="changeView('view2', 'view1');">Change to View2</button>
  </div>
  <div id="view2">
    View2
    <br>
    <button dojoType="Button" widgetId="view2Button" onClick="changeView('view1', 'view2');">Change to View1</button>
  </div>
</body>
</html>

这让我可以用onclick、css和一点js来更改视图。

我认为这是你提到的解决我的方法的各种方法之一。但我认为我现在缺少的是将我的函数changeView与dojo结合起来——不知何故。

现在将dojo和函数changeView结合起来的正确方法是什么？

我会用define编写一个dojo模块，然后在我的html中使用它并用require调用它吗？

或者一般来说。。对于一个道场初学者来说。

如果我的应用程序需要javascript代码，有没有一种直接的方法可以将其与dojo结合起来？

例如，使用任何类型的近似

看看道场有什么解决方法
如果还没有合适的dojo modul/函数，请编写JS代码
考虑将JS代码分离为模块
使用define在dojo中编写模块
使用require调用应用程序中的模块

这是在dojo中进行编程的正确方式吗？

问题更多的是"如何将JS和dojo粘合在一起"，以编写Web应用程序并利用dojo的优势。

提前Thx。

相关内容

最新更新

热门标签：