AppGyver 类固醇超音速视图

Question

我正在尝试切换视图/将视图传递到另一个视图。

我有一个正在调用 kimono API 的应用程序，所有设置都带有超音速背景，看起来不错。我在 API 中有 1 个字符串和 2 个对象。我有一个页面使用名为 event:

的页面调用完整的事件列表

The Event#Index controller is:

    angular
      .module('event')
       .controller("IndexController", function ($scope, Event, supersonic) {
        $scope.events = null;
        $scope.showSpinner = true;

    Event.all().whenChanged( function (events) {
        $scope.$apply( function () {
          $scope.events = events;
          $scope.showSpinner = false;
        });
    });
    });

And all of that displays properly. The issue is when I click on one of those items shown which should go to the specific event I get nothing. And I'm sure I'm doing this wrong or don't understand enough about switching views. I've read many examples, but I'm not getting how it all goes together.

这是我的活动#show 页面。非常通用，此时只是尝试加载任何信息。

<div ng-controller="ShowController">
  <super-navbar>
    <super-navbar-title>
      Show
    </super-navbar-title>
  </super-navbar>
<div class="padding">
  {{ event.eventdescription }}
</div>
</div>

以及演出总监：

angular
  .module('event')
  .controller("ShowController", function ($scope, Event, supersonic) {
     $scope.events = null;


        Event.all().whenChanged( function (events) {
            $scope.$apply( function () {

            });
        });
      });

而且这总是 returns 空白页。当我查看日志时它说 Undefined.undefined 我不确定那是什么意思。

非常感谢任何对此的见解。在 appgyver 文档中，我看到了一个叫做的东西。

var view = new supersonic.ui.View("bananas#show");
                                    supersonic.ui.layers.push(view);

但我不确定如何使用它？任何见解表示赞赏。

所以，我更新了：

这是我正在处理的事件#index。

<div ng-controller="IndexController">
  <super-navbar>
    <super-navbar-title>
      Event Index
    </super-navbar-title>
  </super-navbar>

    <ul class="list" ng-hide="events.length == 0">

          <super-navigate view-id="event#show" data-params-id="{{event.id}}" ng-repeat="event in events">

        <li class="item item-icon-right">
          <h2 ng-bind="event.EventTitles['text']"></h2>
      <img ng-src="{{ event.HeadlineImages.src }}" width="100px" height="100px">
      <p> {{ event.eventdescription }} </p>

          <i class="icon super-ios7-arrow-right"></i>
        </li>
      </super-navigate>
    </ul>
  </div>

和索引控制器

 angular
  .module('event')
  .controller("IndexController", function ($scope, Event, supersonic) {
    $scope.events = null;

    Event.all().whenChanged( function (events) {
        $scope.$apply( function () {
          $scope.events = events;

        });
    });
  });

显示 html 页。

<div ng-controller="ShowController">
  <super-navbar>
    <super-navbar-title>
      Show
    </super-navbar-title>
  </super-navbar>

  <div class="padding">
     <p>
      {{event.eventdescription}}
     </p>
  </div>
</div>

ShowController

angular
  .module('event')
  .controller("ShowController", function ($scope, Event, supersonic) {
    supersonic.ui.views.current.params.onValue( function (Event) { 

    $scope.events = event.id; 

});
Event.find($scope.events).then( function (Event) {
$scope.$apply( function () {
 $scope.event = Event;

  });
  });


  });

我也更新了 structure.coffee

 rootView:
    location: "event#index"

  preloads: [
  {
  id: "event#show"    
 }
 {
  id: "using-the-scanner"
  location: "example#using-the-scanner"
 }
 ]

感谢任何帮助。

Answer 1

您的 ShowController 中似乎没有设置数据。我之前评论过这个。我认为您需要使用 <super-navigate> 和 location 属性和 data-params-id 或任何您想要的参数名称来传递事件的 ID。然后在您的 ShowController 中，您可以通过以下方式访问它：

supersonic.ui.views.current.params.onValue( function (values) { 
    // values.nameOfPropertyPassedInCouldBeEventId
    $scope.id = values.id; 
});

那么您也许可以像这样通过 id 访问事件：

Event.find($scope.id).then( function (theEvent) {
    $scope.$apply( function () {
      $scope.event = theEvent;
    });
  });

现在在您的视图中您有 {{ event.eventdescription }} 应该有一些数据。

还有一个关于视图何时可见的部分，这意味着每次您看到该视图页面时都会触发：

supersonic.ui.views.current.whenVisible( function () { 
    // your code for watching events 
});

Answer 2

好吧，经过几个星期的努力让这个工作起来，虽然，我仍然没能让它工作......我想我终于有了这个......看起来这里最大的问题是使用 Kimono 和 AppGyver。 JSON 文件已在 Kimono 中更新，使用：

function transform(data) {
  data.results.collection1 = data.results.collection1.map(function(o) {
    o.eventdescription = {
      text: o.eventdescription
    }
    return o;
  });
  return data;
}

这会清理作为 API 导出/传入 App Gyver 的 JSON 文件，以便所有部分都是对象。（我知道，也许没什么大不了的，但我只是想让它尽可能干净）。让您了解在 Kimono 修改结果框中使用此脚本前后的情况 --> 之前：

"EventTitles": {
"href": "http://",
"src": "http://.jpg",
"text": "Lorem Ipsum"
},
"HeadlineImages": {
"href": "http://",
"src": "http://.jpg",
"text": "Lorem Ipsum"
},
"eventdescription":"Lorem Ipsum" 
},

将 eventdescription 保留为字符串而不是对象，然后是 AFTER：

"EventTitles": {
"href": "http://",
"src": "http://.jpg",
"text": "TEXT"
},
"HeadlineImages": {
"href": "http://",
"src": "http://.jpg",
"text": "TEXT"
},
"eventdescription": {
"text": "TEXT"
},

因此，在运行之后进入 Kimono，您可以看到所有条目都是 "objects"。你会在 link 中的 apikey 之后使用 &kimmodify=1 因此：

https://www.kimonolabs.com/api/{indentifier}{apikey}&kimmodify=1

NEXT，正如 AppGyver 社区向我解释的那样，对于正在创建的 JSON / API 中的每个项目，几乎需要一个 "id" 种类能够使用 ShowController 在 show.html 上创建合理/可行的 url 字符串。

从索引转到特定条目视图时，应该创建类似于 /app/tier/showid=123456789 的内容。

（您可以通过 Mac 上的 Safari Web Inspector 和 IOS 模拟器在 AppGyver 中使用调试模式找到 URLs。或者浏览器使用 http://localhost:[some port number]/location/of/app 使用 Android 模拟器（推荐的 Genymotion）时。

因此，要做到这一点，在 Kimono 中使用 API 哈希添加 &kimhash=1 到 url 的末尾 APIKEY 之后但之前修改如下：

https://www.kimonolabs.com/api/{indentifier}{apikey}&kimhash=1&kimmodify=1

。参见：Kimono API Docs- Re:Hash。

这会创建类似

的内容

"EventTitles": {
"href": "http://",
"src": "http://.jpg",
"text": "TEXT"
},
"HeadlineImages": {
"href": "http://",
"src": "http://.jpg",
"text": "TEXT"
},
"eventdescription": {
"text": "TEXT"
}, 
"hash":"1a2b3c4d5e6f7g8h9z"},

为每个条目创建随机 'indentifier'。

现在，这就是我现在被困的地方。 ...因为需要进来的 API URL 是：

https://www.kimonolabs.com/api/{indentifier}{apikey}&kimhash=1&kimmodify=1

当你在后端配置你的 API 时，我看不到要输入这个新的 &kimhash=1&kimmodify=1 的区域，它需要在 URL 的末尾调用格式正确且 ID 为 API 的代码，据我所知，没有这样做的参考资料。

http://docs.appgyver.com/supersonic/guides/data/other-data-providers/kimono-labs/

我觉得这是解决所有问题并最终能够启动并运行的倒数第二步。最后一个显然是重新访问将 id 拉入 ShowController，我对我是否能以某种方式弄清楚这最后一部分感到有些自信。

有什么想法吗？？

AppGyver 类固醇超音速视图

AppGyver Steroids Supersonic Views

javascript

angularjs

steroids

appgyver

supersonic