Meteor-Ionic: Can't get list items to link?


#1

In the Meteor-Ionic Contacts example, the ionItem line is just:
{{#ionItem path="contacts.show" buttonRight=true avatar=true class="item-icon-right"}}
And it generates the list items with the _id appended to the path. I want to do the same thing, but copying this format isn’t working for me—what else is needed? Everything renders correctly, but the listItems are not links.

Here’s what I’ve got:

lib/router.js

Router.map(function() {
  this.route('home', {path: '/', layoutTemplate: 'tabsLayout'});
  this.route('star', {path: '/star', layoutTemplate: 'tabsLayout'});
  this.route('heart', {path: '/heart', layoutTemplate: 'tabsLayout'});
  this.route('gear', {path: '/gear', layoutTemplate: 'tabsLayout'});
  this.route('star.detail', {path:'/star/:id', layoutTemplate: 'tabsLayout'});
});

client/star.html

<template name="star">
  {{#ionView}}

    {{#ionContent class="padding"}}
        {{#contentFor "headerTitle"}}
          <h1 class="title">Star</h1>
        {{/contentFor}}

        {{#ionList}}
            {{#each listItems}}
              {{#ionItem path="star.detail" buttonRight=true class="item-icon-right"}}
                <h2>{{title}}</h2>
                <p>{{_id}}</p>
                {{> ionIcon icon="ios-arrow-right"}}
              {{/ionItem}}
            {{/each}}
        {{/ionList}}
    {{/ionContent}}

    {{> _tabs}}
  {{/ionView}}
</template>

<template name="starDetail">
    <h1>Star Details</h1>
</template>

client/base.html

<template name="tabsLayout">
    {{#ionBody}}
        {{> ionNavBar class="bar-positive"}}

        {{#ionNavView}}
            {{> yield}}

        {{/ionNavView}}
        {{> _tabs}}
    {{/ionBody}}
</template>

<template name="_tabs">
  {{#if isAndroid}}
    {{#ionTabs style="android" class="tabs-background-positive tabs-color-light"}}
      {{> ionTab title="Home" path="home" icon="android-home"}}
      {{> ionTab title="Star" path="star" icon="android-star"}}
      {{> ionTab title="Heart" path="heart" icon="heart"}}
      {{> ionTab title="Gear" path="gear" icon="gear-b"}}
    {{/ionTabs}}
  {{else}}
    {{#ionTabs style="ios" class="tabs-background-positive tabs-color-light"}}
      {{> ionTab title="Home" path="home" iconOff="ios-home-outline" iconOn="ios-home"}}
      {{> ionTab title="Star" path="star" iconOff="ios-star-outline" iconOn="ios-star"}}
      {{> ionTab title="Heart" path="heart" iconOff="ios-heart-outline" iconOn="ios-heart"}}
      {{> ionTab title="Gear" path="gear" iconOff="ios-gear-outline" iconOn="ios-gear"}}
    {{/ionTabs}}
  {{/if}}
</template>

#2

If you look at my repo and compare it to the Contacts example, you’ll see that they are effectively identical except mine has the tabs in the layout. I even tried adding tabs to the Contacts example and it still worked, of course.

So it seems like MY project is somehow missing some kind of core element. The Contacts example has more packages installed, but none of them would seem to be relevant (i.e. zimme:active-route or autoforms).

What gives?


#3

If you inspect the element via developer console, what does the href attrbute show?

Also, is the issue on mobile, desktop or both?


#4

this.route('star.detail', {path:'/star/:_id', ... you are missing an underscore for your id in your route. So id will be undefined for a document unless you have defined it elsewhere.

Either way this is a legacy method for using iron router. Consult the iron router docs for up to date methods for defining routes.


#5

Great catch, @entropy. That was exactly the problem. Such a subtle mistake—thank you so much!