Question

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

我有一个用和服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>

showcontroller：

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


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

            });
        });
      });

这总是会返回一个空白页面。当我检查日志时，它显示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;

        });
    });
  });

show html page。

<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

好的，经过几个星期的努力让这个工作，虽然，我仍然没有能够让这个工作呢......我想我最终得到了这个......看来这里最大的问题是使用和服和AppGyver。 JSON文件已使用以下内容在Kimono中更新：

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

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

"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之后，您可以看到所有条目都是＆＃34;对象＆＃34;。并且您在链接中的apikey之后使用＆amp; kimmodify = 1：

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

NEXT，正如AppGyver社区向我解释的那样，人们非常需要一个＆＃34; id＆＃34;为了能够使用ShowController在show.html上创建合理/可行的url字符串而创建的JSON / API中的每个项目的排序。

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

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

所以，要做到这一点，在Kimono中使用API Hash add＆amp; kimhash = 1到你的网址末尾的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"},

一个随机的标识符＆＃39;为每个条目创建。

现在，这就是我现在所困的地方。 ...因为需要输入的API URL是：

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

当你在后端配置你的API时，没有任何区域我看到输入这个新的＆amp; kimhash = 1＆amp; kimmodify = 1需要在URL的末尾以正确格式化的方式调用id＆＃39; API，据我所知，没有参考资料。

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

我觉得这是完成这一切的最后一步，并最终能够实现这一目标。最后一个显然是重新将id引入ShowController，我对如果能以某种方式找出最后一部分感到有些自信。

任何想法??

AppGyver类固定超音速视图

2 个答案: