Question

这个问题不是关于如何切换div。而是如何在大型网络应用中切换可见性。我的网络应用程序只需要在Chromium（Webkit）上运行。我遇到的问题可能与基础设施和最佳实践有关，我想知道是否有人有这方面的经验。

我的应用程序在node-webkit上运行，这意味着所有文件都是本地文件，并且加载速度很快。为了感觉真的很快，我尽可能地将所有内容添加到DOM。我想远离州使用Javascript更改我的应用程序，所以没有$('.view-projects').addClass('visible');。因为它很快会变得混乱，我觉得这不是JS的任务。

相反，我选择的方法就是这样。

// javascript sample (I actually code in CoffeeScript)
// catch all click events on elements with data-trigger attributes
app.on('view:addProject', function () {
  // add a class to the root view
  $('#app').addClass('view-addProject');
}):

标记：

<!-- markup sample -->
<div id="app">
   <div class="projects">
      <div data-trigger="view:addProject"></div>
      <div>etc.</div>
   </div>

   <div class="addProject">
     etc.
   </div>       
</div>

Css，用作状态机：

app.view-addProject .addProject {
   visibility: visible;
   display: block;
}

我想知道的是，如果其他人尝试过这样的事情，有其他方法的良好经验等。或者我可能错过了一些东西，我觉得自己陷入了动态内容的困境。

注意：我不能简单地使用show / hide，因为我的元素使用display: -webkit-flex/-webkit-box;等。

Answer 1

如果您想切换可见性，可以采用以下替代方法：

通过CSSOM更改CSS来控制状态
通过更改数据属性来更改状态
通过更改DOM nodeNames

切换Web应用程序中内容的可见性

1 个答案: