1

So I'm basically trying to make profile pages. I have a JavaScript file with an object in it, which contains all of the "users" (it's a school project so these are fake users I created myself). I also have an HTML page where I listed all of these users (I'm using a combination of Jekyll, Handlebars and JavaScript). Under each user profile picture, I added a button which should link to a detail page for each user. Like so:

<p><a class="btn btn-default" href="profile.html?id={{id}}" role="button">View details &raquo;</a></p>

This works fine and every user has its own page. My problem is, I have no idea how to show user specific content since I (have to) use the same page (profile.html).

This is how I listed out all users:

<script id="users-template" type="text/x-handlebars-template">


        {% raw %}

        {{#each this}}
          <div class="col-md-3">
          <div class="user">
                <img src="{{picture}}" class="profpic"/>
                <h4>{{firstName}} {{surName}}</h4>
                <p><a class="btn btn-default" href="profile.html?id={{id}}" role="button">View details &raquo;</a></p>
          </div>
        </div>
        {{/each}}

        {% endraw %}


      </script>

Is there a way to use handlebars to select only one of these users and show the content on that page? And also how do I make sure that my new page knows which user ID I'm currently viewing? Any help would be appreciated.

Kevin
  • 59
  • 1
  • 10
  • As far as I can see, you're basically asking how to read URL parameters with JavaScript: https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters –  Jul 30 '17 at 15:07
  • Well, maybe but so far my biggest problem is how to get user specific content on one page without showing all profiles to every user – Kevin Jul 30 '17 at 15:17
  • From what I can tell, `this` is an array of users. So all you need to do is to use `{{this[id].firstName}}` and so on, right? I'm no handlebars expert, but it seems like double brackets contain JS objects. –  Jul 30 '17 at 15:24
  • Unfortunately that's not how handlebars works... that seems more like a regular JavaScript approach (which if it would work, would be fine too) – Kevin Jul 30 '17 at 15:53
  • I looked over the docs and it seems like you can provide a context object when compiling a template. If your users object is an array with id being the key, just pass `users[id]` as context to the template, and you can use `{{firstName}}` inside it. –  Jul 30 '17 at 17:10

0 Answers0