Question

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

假装您有一个单页应用程序，但您有两个视图，它们构建完全不同。一种观点是例如一个刚刚填满Bordercontainer中心的起点。第二个视图看起来像一个标准的webapp，在Bordercontainer-top中有一个标题，在Bordercontainer-left中有一个菜单，在Bordercontainer-center中有一些内容。

如果现在调用了index.html（单页应用程序），我希望首先显示该起始页。应该有一个onclick事件。通过此事件，视图应该更改。这意味着startpage消失，并显示第二个webapp-view。

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

我想过使用两个Bordercontainers。第一个Bordercontainer将包含区域中心的起始页。第二个Bordercontainer将包含webapp-view（顶部，左侧，中间）。现在是否可以通过首页与第二个Bordercontainer交换的方式将中心区域从边缘容器中交换出来？这会是一种解决方法的方法吗？如果是的话，我需要一种可以交换视图的控制器。我可以使用dojo.wire来解决这个问题吗？

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

每个提示都有。

Answer 1

我尝试了以下代码：

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结合使用？

e.g。任何类型的approuch

看看dojo必须解决什么问题
编写JS代码，如果没有合适的dojo模块/函数
考虑将JS代码分成模块
使用define
使用require

这是在dojo中编程的正确方法吗？

问题更多的是“如何将JS和dojo结合在一起”以编写webapps并使用dojo的优点。

Answer 2

你应该看看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/），看看是否能满足您的需求。

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

2 个答案: