web-applications - Usinf App.js 框架并尝试使用 photoviewer 但 App.load 冲突

Question

您好，请查看以下代码，我正在使用 App.js 框架创建移动 Web 应用程序，并且我想在用户单击某个按钮时显示照片查看器。但我无法这样做，问题是 App.load 事件可能是冲突的，因为我使用它两次，一次用于“查看器”，一次用于“主页”，请告诉我我可以用查看器做什么来制作它点击按钮加载，记住这是使用 zepto ( https://zeptojs.com/ ) 的框架。代码是这样的......`

    App.controller('home', function (page) {
    // put stuff here
  });

  App.controller('page2', function (page) {
    // put stuff here
  });
    App.controller('page3', function (page) {
    // put stuff here
  });

    App.controller('page4', function (page) {
    // put stuff here
  });

    // in your js
    App.controller('viewer', function (page, data) {
        var photoViewer = new PhotoViewer(page, data.urls);
   });        
    // to use the viewer
    App.load('viewer', {
      urls: [
        'images/exercise1pg1.jpg',
        'images/exercise1pg2.jpg',
        'images/exercise1pg1.jpg',
        'images/exercise1pg2.jpg',
        'images/exercise1pg1.jpg'
      ]
    });
         try {
            App.restore(); 
          } catch (err) {
            App.load('home');
          }        
</script>`

Answer 1

您正在使用将参数“页面”称为“查看器”的演示示例。但是，根据您的代码，您决定将页面称为“主页”（或者 page2、page3、page4）。如果您希望 PhotoViewer 在您的页面上运行，只需将 'viewer' 替换App.controller()为App.load()'page' 名称，例如 'home'，如下所示：

App.controller('home', function (page, data) {
        var photoViewer = new PhotoViewer(page, data.urls); 
}); 

App.load('home', {
      urls: [
        'images/exercise1pg1.jpg',
        'images/exercise1pg2.jpg',
        'images/exercise1pg1.jpg',
        'images/exercise1pg2.jpg',
        'images/exercise1pg1.jpg'
      ]
    });