AppGyver Steroids Supersonic Views

Question

I'm trying to get my head around switching views / passing views to another view.

I have an app that is calling in a kimono API, that's all setup with the supersonic background and looks fine. I have 1 string and 2 objects in the API. I have a page that is calling in the full list of events using a page called event:

{{ event.eventdescription }}

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.

here is my event#show page. Very generic just trying to load any information at this point.

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

And the showcontroller:

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


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

            });
        });
      });

And this always returns a blank page. When i check the log it says Undefined.undefined which i'm not sure what that means.

Any insight on this is greatly appreciated. In the appgyver docs I saw something called.

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

But I'm not sure how to use this? ANY insight is appreciated.

So, UPDATED I have:

here's the event#index i'm working with.

<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>

And the Index Controller

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

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

        });
    });
  });

The 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>

The 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;

  });
  });


  });

And I also updated the structure.coffee as so

 rootView:
    location: "event#index"

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

Any help is appreciated.

Answer 1

Ok, after a couple weeks of trying to get this working and although, I still haven't been able to get this to work yet.. I think I'm getting somewhere with this FINALLY... It seems the biggest problem here is using Kimono and AppGyver. The JSON file has been updated in Kimono using:

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

This cleans up the JSON file exported/ coming in as API to App Gyver so that all parts are objects. ( I know, maybe not a big deal, but I just wanted to make this as clean as possible). To give you an idea of the before and after of using this script in the Kimono Modify Results box --> BEFORE:

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

which leaves eventdescription as a string rather than object and then the AFTER:

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

So, after running this into Kimono as you can see all entries are "objects". And you'd use &kimmodify=1 AFTER the apikey in the link thusly:

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

NEXT, as I was explained to by the AppGyver community one would pretty much need an "id" of sorts for each item in the JSON / API that's being created to be able to use the ShowController to create a reasonable/ feasible url string on the show.html.

Which should create something like /app/tier/showid=123456789 when going from the index to a specific entry view.

(You find the URLs by using the debug mode in AppGyver either via Safari Web Inspector on Mac with the IOS Emulator. or a browser using http://localhost:[some port number]/location/of/app when using the Android Emulator (the recommended Genymotion).

So, to do this, in Kimono use the API Hash addition &kimhash=1 to the end of your url AFTER the APIKEY but BEFORE the modify such as this:

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

. See: Kimono API Docs- Re:Hash.

This creates something like

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

a random 'indentifier' is created for each entry.

Now, that's where I'm stuck now. ...because the API URL needing to come in is:

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

and when you go to configure your API on the backend there is no area I see to enter this new &kimhash=1&kimmodify=1 that needs to be at the end of the URL to call in the correctly formatted and id'd API and as far as I can see there is no reference for doing this.

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

I feel like this is the next to last step in figuring this all out and finally being able to get this up and working. The last being to obviously revisit pulling in the id to the ShowController which I'm feeling somewhat confident about if I can somehow figure out this last part.

Any ideas??

Answer 2

It doesn't look like the data is being set in the your ShowController. I commented about this before. I think you need to pass the id of the event using <super-navigate> with a location property and a data-params-id or whatever you want the parameter name to be. Then in your ShowController you can access it with:

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

Then you might be able to do something like this to access the Event by id:

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

Now in your view where you have {{ event.eventdescription }} there should be some data.

And another piece for when the view is visible meaning every time you see that view page this will fire:

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