Using Iron Router to develop a contacts application that features individual pages for every contact

I am currently working on a feature where each contact in the collection will have specific values such as first name, last name, and email. Whenever a contact is selected from the list, I want it to redirect to a second page where all the details for that contact are displayed.

At the beginning of my Contact.js file, I've included this code...

Router.route('/post/:_id', function () {
    this.render('Post', {
  data: function () {
    return Contax.findOne({_id: this.params._id});
  }
  });
});

In addition, here is the event handler for when a particular contact is clicked...

Template.aCont.events({
    "click #view": function() {
      Router.go('/post/:' + this._id);
    }
  });

Lastly, here is the relevant HTML snippet...

<template name="contDeets">
  <ul class="list-group">
    <li class="list-group-item">{{this.firstName}}, {{this.lastName}}</li>
  </ul>
</template>

<template name="Post">
  {{#contentFor "headerButtonLeft"}}
    {{>ionNavBackButton}}
  {{/contentFor}}
  {{#contentFor "headerTitle"}}
    <h1 class="title">Contacts</h1>
  {{/contentFor}}
  {{#contentFor "headerButtonRight"}}
  <a id="add" class="button button-clear button-positive" href='/add'>Add</a>
  {{/contentFor}}
  {{#ionView}}
    {{#ionContent}}
      <div id="contactList2">
        {{> contDeets}}
      </div>
     {{/ionContent}}
  {{/ionView}}
</template>

There seems to be an issue with my code. Although it opens a new page with the correct URL, the information that should be displayed ({{this.firstName}}, {{this.lastName}}) is not appearing correctly except for the comma. What could be causing this problem?

Answer №1

To signify parameters, a colon is used in the route declaration. When invoking the route, do not include the colon; rather, simply specify the desired value for the parameter:

Template.aCont.events({
    "click #view": function() {
      Router.go('/post/' + this._id);
    }
});

All other aspects appear to be satisfactory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with utilizing Vuejs variable in Google Maps Matrix API function

Having trouble accessing a Vue.js variable in a function using the Google Maps Matrix API. I am trying to use the Google Distance Matrix API to calculate the distance between two locations. I have declared a variable globally and changed it within a functi ...

Warning: Please use a function instead of Collection#find

I am new to the world of node.js and currently experimenting with discord.js to create a Discord bot. Whenever I use any bot command, I receive a DeprecationWarning in the console. Here is an example: (node:15656) DeprecationWarning: Collection#find: pass ...

Retrieve data from a JSON file using Ajax and jQuery

I have a JSon file that contains information about some matches: [{ "id": "2719986", "orario": "00:30", "casa": "Bahia", "trasferta": "Internacional" } , { "id": "2719991", "orario": "02:00", "casa": "Palmeiras", "trasferta": "Botafogo RJ" }] I'v ...

Error: Invalid argument type. The argument "chunk" should be either a string or a Buffer, instead of a number

Currently, I am working on a problem on HackerEarth and utilizing JavaScript for the task. Here is the code I have implemented: // Sample code to perform I/O: process.stdin.resume(); process.stdin.setEncoding("utf-8"); var stdin_input = ""; process.stdin ...

What are the steps to view output on VS Code using Typescript?

Currently, I am working on code challenges using Typescript in Visual Studio Code. However, whenever I attempt to run the code and view the output, I encounter an error stating "Code Language is not supported or defined". I have already set the language ...

Parallax enchantment with CSS clip masking

I'm trying to apply a clip mask to an image in order to prevent it from overlapping with its background, but I'm not exactly sure how to achieve this. I attempted using the background-clip property with box/padding values, however, it did not pro ...

Converting UTC Date Time to Full Date Using ES6

Is there a way to transform the date 2021-01-10 12:47:29 UTC into January 10, 2021? I've been attempting to achieve this using moment.js code below, but it seems to be functioning in all browsers except Safari. {moment(video?.createdAt).format(' ...

Challenges with connecting IPV6 and MongoDB Ruby driver

On three separate computers that are only accessible by IPV6, I am utilizing MongoDB. I can successfully connect to these databases using the php5 driver, command line interface (using the --ipv6 option), and a UI application called "MongoHUB". The only d ...

What could be the reason for the inability to generate the response using response.writeHead and response.write functions?

I recently started learning about node.js and I'm facing an issue with the code inside the if and else loop for the '/socket.html' case. Despite my efforts, I always get a 200 status code and a blank response when accessing the URL localhost ...

What is the process for dynamically populating a select dropdown based on the selection made in another select dropdown?

I need to dynamically populate the second select box based on the option selected in the first select box. Here's what I have tried so far, but it doesn't seem to be working as expected. HTML: <form id="step1"> <p> Creat ...

Isotope animation glitches causing malfunction

I've been experimenting with CSS3 transitions on isotope items, but I'm encountering some strange behavior. My goal is to achieve a fading effect on the items, similar to this example: . Thank you in advance! Here's what I have so far: http ...

What exactly is the significance of placing a term "in" within a method's parameter list in documentation?

Forgive me for what may seem like a silly question, but I prefer to clarify doubts rather than leave gaps in my knowledge. Let's look at this snippet taken from developer.mozilla.org: void initCustomEvent( in DOMString type, in boolean canBu ...

Verifying Dates with Bootstrap DatePicker

My bootstrap datepicker has a startDate value of '1/1/1990', but when a user manually enters a date like '1/1/201' (possibly a typo for '1/1/2014'), the date field becomes blank when they move to a different section. Is there ...

Getting the user's name and country using `auth().createUserWithEmailAndPassword` is a simple process

Hey there fellow developers. I'm fairly new to react native and I'm trying to implement firebase authentication for a project. However, I'm stuck on how to include user name and country when using the standard auth().createUserWithEmailAndPa ...

Dealing with AJAX error in pure JavaScript

I have been attempting to address AJAX errors using the code below, but unfortunately, it does not seem to be effective. function ajaxPost(url, data, success, error) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () ...

Exporting a node express app for chai-http can be done by creating a module

I have set up an express app with multiple endpoints and am currently using mocha, chai, and chai-http for testing. Everything was running smoothly until I added logic for a pooled mongo connection and started creating endpoints that rely on a DB connectio ...

A guide on how to effectively simulate a commonJS module that has been imported in

How can I successfully mock a commonJS style module in Jest that I am importing for an external connection? The module is called 'ganblib.js' and it's causing some trouble when trying to mock it with Jest. Any advice or suggestions would be ...

Guide to verifying a Django form with AngularJs

I have a very simple form with 1 field and a submit button. I want to implement validation such that the submit button is disabled when the field is empty and enabled when it is not. I am trying to achieve this dynamically using AngularJs but seem to be mi ...

Etiquette for the organization of jQuery functions through chaining and nesting

For developers familiar with jQuery, creating dynamic HTML easily can be done using the following method: var d = $('<div/>') .append('some text') .append( $('<ul/>').append( $('&l ...

Guide to building a fast search feature similar to Google using JSP and servlets

Currently, I am developing a simple instant search feature that searches the database and immediately displays results, similar to Google Instant. I came across an article on implementing this feature at . However, I am curious to know if it's possibl ...