Question

我正在使用AppGyver Steroids和Supersonic来构建应用程序，并且我在以编程方式在视图之间导航时遇到一些问题。

根据文档，您可以在以下视图之间导航：

var view_obj = new supersonic.ui.View("main#index");
supersonic.ui.layers.push(view_obj);

然而，当我通过Chrome DevTools检查事物时，似乎创建了第二个重复视图，即如果我离开索引页然后导航回来，我现在有两个索引页，而不是[我认为]应该是一个。它也没有关闭我以前的观点。

如何防止这种情况发生，只需移动到现有视图，而不是复制视图？在我离开之后如何关闭视图？

感谢。

Answer 1

尝试

var view_obj = new supersonic.ui.View("main#index");
supersonic.ui.layers.replace(view_obj);

并查看supersonic.ui.layers.pop();

Answer 2

您遇到的问题是，每次导航时都要创建new supersonic.ui.View("main#index")。最重要的是，我想你第二次导航回视图时想要返回相同的视图，即你希望视图保留在内存中，即使它已经从导航堆栈中删除{{1 （而不是推送该视图的新实例）。为此，您需要预加载或＆＃34; pop()＆＃34;视图，如文档here中所述。

我实现了自己的帮助函数，使这更容易;这是我的代码：

＆＃13;

start()

＆＃13;

像start = function(dest, isModal) { var viewId=dest, view=new supersonic.ui.View({ location: dest, id: viewId }); view.isStarted().then(function(started) { if (started) { if (isModal) {supersonic.ui.modal.show(view);} else {supersonic.ui.layers.push(view);} } else { // Start Spinner supersonic.ui.views.start(view).then(function() { if (isModal) {supersonic.ui.modal.show(view);} else {supersonic.ui.layers.push(view);} // Stop Spinner }, function(error) { // Stop Spinner A.error(error); }); } }); };一样使用它。作为奖励，您可以将start('module#view');作为第二个参数传递，然后将其作为模态推送。

它会检查您是否已经启动了视图 - 如果是这样，它只是将该视图推回到堆栈中。如果没有，它true（即预加载）它，然后推它。这可以确保视图保留在内存中（使用已修改的任何用户输入），即使您从堆栈中start()它也是如此。

您必须想象图层堆栈实际上是计算机科学意义上的堆栈。您只能在堆栈顶部添加和删除视图。其结果是复杂的导航，例如A> 1。 B> C> D> B很难/很难做（在这种情况下，你必须连续pop() D和C才能回到B）。

只要您不 pop()，只要您pop()，视图就会关闭。如果你这样做，而你start()，他们就会留在记忆中。要取消该视图，您必须在其上调用pop()，如上面链接的文档中所述。

Answer 3

感谢LeedsEbooks帮助我了解这一挑战。我找到了解决方案。这是代码：

  var start = function(route_str, isModal) {

      var regex = /(.*?)#(.*)/g;
      var match_obj = regex.exec(route_str);

      var view_id_str = match_obj[2],
          view_location_str = route_str,
          view = new supersonic.ui.View({
              location: view_location_str,
              id: view_id_str
          });

      view.isStarted().then(function(started) {
          if (started)
          {
              if (isModal)
              {
                  supersonic.ui.modal.show(view);
              }
              else {
                  supersonic.ui.layers.push(view);
              }
          }
          else
          {
              // Start Spinner
              supersonic.ui.views.start(view).then(function() {
                  if (isModal)
                  {
                      supersonic.ui.modal.show(view);
                  }
                  else
                  {
                      supersonic.ui.layers.push(view);
                  }
                  // Stop Spinner
              }, function(error) {
                  // Stop Spinner
                  A.error(error);
              });
          }
      });
  };

您必须确保您的路线具有文档中定义的格式module#view。

请注意

用于启动视图的超音速 ui方法似乎存在一些问题。如果您运行以下代码：

supersonic.ui.views.start("myapp#first-view");
supersonic.ui.views.find("first-view").then( function(startedView) {
    console.log(startedView);
});

您会注意到您的观看次数id和location相同。这似乎是错误的，因为id应该是first-view而location应该是myapp#first-view。

所以我决定不使用AppGyver方法并创建我自己的预加载方法，我从连接到我的主视图的控制器运行（这可以确保在应用程序加载时处理我想要预加载的所有视图）。这是执行此操作的功能：

  var preload = function(route_str)
  {
      var regex = /(.*?)#(.*)/g;
      var match_obj = regex.exec(route_str);
      var view = new supersonic.ui.View({
          location: route_str,
          id: match_obj[2]
      });
      view.start();
  };

通过这样做，我确信该视图将加载正确的location和id，并且当我稍后使用我的start()函数时，我不会有任何问题。

您需要确保您的structure.coffee文件没有任何preload说明，以免创建您稍后会遇到问题的重复视图。

最后，我有一个视图，它是一个通过AJAX操作发布数据的表单。当AJAX操作完成时，我希望视图返回到上一个视图。使用我之前的函数导致push()被拒绝。如果AppGyver Supersonic可以智能地检测到推送到上一个视图应该默认为layers.pop操作，那将是很好的，但是你并不总是得到你想要的。无论如何，我设法使用supersonic.ui.layers.pop()来解决这个问题，它只是执行后退按钮所做的事情。

现在一切正常。

AppGyver Supersonic在视图之间导航并创建重复项

3 个答案: