0

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

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

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

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

如何防止这种情况发生并简单地移动到现有视图，而不是复制视图？导航离开视图后如何关闭视图？

谢谢。

4

3 回答 3

0

尝试

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

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

于 2015-03-27T12:49:41.620 回答
0

感谢 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 方法，而是创建我自己的 preload 方法，我从附加到我的主视图的控制器中运行该方法（这样可以确保在应用程序加载时处理我想要预加载的所有视图）。这是执行此操作的函数：

  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();
  };

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

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

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

现在一切都按预期工作。

于 2015-03-28T07:02:40.827 回答
0

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

我实现了自己的辅助函数以使这更容易；这是我的代码：

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()（即预加载）它，然后推送它。这可以确保视图保留在内存中（任何用户输入已被修改），即使您pop()从堆栈中查看它也是如此。

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

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

于 2015-03-27T16:28:44.813 回答