How to access a pre-rendered Mongo field value in Meteor using JavaScript

Question

How to access a pre-rendered Mongo field value in Meteor using JavaScript

Greetings to all! Thank you for your assistance. The question has been revised based on the feedback received.

I'm a newbie when it comes to Mongo and Meteor.

In my "posts" collection, there is a field called "slug".

The "post" template is correctly populating with values of each post. The slug value always follows a format like "my-great-post".

My task is to retrieve the text value for the _id's slug, which will vary each time the template is accessed. I need to encode it, generate a string, and then display the string in the template.

Attempts Made:

Failed to return a value for "this.slug" or "this.data.slug" in either template helpers or onRendered, despite having the collection defined and accurately populating spacebars values in the template
When using "this", it outputs "[object Object]" to the console.log
The app crashes when trying to encode and deliver a string from the helper function. Perhaps, I do not fully grasp the syntax for helpers as per the documentation

(Per advice in the comments, I refrained from attempting to create scripts in the template HTML. Here is additional information requested by those providing assistance)

- Template HTML -

{{#with post}}

<div class="blog-article">
  <div class="blog-header">
    <div class="left">

      <!-- title -->
      <h1 class="post-title">{{title}}</h1>

      <div class="holder">
        <div class="post-tags">
          <!-- tags -->
           {{#each tags}}
              <span>{{this}}</span>
           {{/each}}
        </div>
      </div>

    </div>

  </div> 

  <div class="blog-post">
    <div class="blog-copy">

      <!-- date -->
      <div class="post-date">{{post_date}}</div>

      <!-- social -->  
      <div class="blog-social">
         <!-- 
               <a class="so-facebook" target="_blank" href="need to encode slug here"></a>
         -->       
       </div>

       <!-- ============== post ============== -->

       {{{content}}}

       <!-- ============ end post ============ -->

     </div>
  </div>
</div>

{{/with}}

- Template JS -

Template.post.onCreated(function() {
  var self = this;
  self.autorun(function() {
    var postSlug = FlowRouter.getParam('postSlug');
    self.subscribe('singlePost', postSlug);  
  });
});

Template.post.helpers({

  post: function() {
    var postSlug = FlowRouter.getParam('postSlug');
    var post = Posts.findOne({slug: postSlug}) || {};
    return post;
  } 

   // Unable to make these work within a helper function; they crash the app outside the helper
   // console.log(this.slug);   
   // console.log(this.data.slug);

});

Template.post.onRendered( function () {

   // These are ineffective 
   // console.log(this.slug);   
   // console.log(this.data.slug);

});

db.posts.findOne();

{
  "_id" : ObjectId("576c95708056bea3bc25a91f"),
  "title" : "How Meteor Raised the Bar For New Rapid-Development Technologies",
  "post_date" : "May 28, 2016",
  "image" : "meteor-raised-the-bar.png",
  "slug" : "how-meteor-raised-the-bar",
  "bitlink" : "ufw-29Z9h7s",
  "tags" : [
    "Tools",
    "Technologies"
           ],
  "excerpt" : "sizzling excerpt",
  "content" : "bunch of post content html"
}

If someone can resolve this using any method, I would be overjoyed and immensely grateful for the solution.

javascript mongodb meteor

Answer 1

Answer №1

It seems like the issue lies within the parent template, rather than this specific one. In Meteor, JavaScript files are separated from HTML files, so avoid including a <script> tag in your HTML.

The first step is to load all your documents into the client. Once you have that down, then you can focus on loading only the necessary documents.

To achieve this, you'll need a collection and a publication. By default, collections are fully published automatically, unless you've disabled the autopublish feature.

Let's begin with the parent template. Here, I'll iterate through all posts in the collection and display them using the innerTemplate.

<template name=parent>
  <ul>
  {{#each post}}
    {{> innerTemplate}}
  {{/each}}
  </ul>
</template>

Next, let's take a look at how the inner template could be structured:

<template name=innerTemplate>
  <li>{{slug}}</li>
</template>

As a result, you'll have a simple list displaying each slug.

To connect everything together, create a JS file that: 1. Defines the collection on both the client and server 2. Passes the collection to the parent template

This JS file should be accessible by both the client and server.

posts = new Mongo.Collection('posts');

if(Meteor.isClient) {
  Template.parent.helpers({
    posts() {
      return Posts.find();
    }
  });
}

If you want to manipulate 'slug' in the JS file, you can do something like this:

if(Meteor.isClient) {
  Template.innerTemplate.helpers({
    upperCaseSlug() {
      return this.slug.toUpperCase();
    }
  });
}

Then, reference upperCaseSlug in your template, like so:

<template name=innerTemplate>
  <li>{{upperCaseSlug}}</li>
</template>

Answer 2

It seems like the issue lies within the parent template, rather than this specific one. In Meteor, JavaScript files are separated from HTML files, so avoid including a <script> tag in your HTML.

The first step is to load all your documents into the client. Once you have that down, then you can focus on loading only the necessary documents.

To achieve this, you'll need a collection and a publication. By default, collections are fully published automatically, unless you've disabled the autopublish feature.

Let's begin with the parent template. Here, I'll iterate through all posts in the collection and display them using the innerTemplate.

<template name=parent>
  <ul>
  {{#each post}}
    {{> innerTemplate}}
  {{/each}}
  </ul>
</template>

Next, let's take a look at how the inner template could be structured:

<template name=innerTemplate>
  <li>{{slug}}</li>
</template>

As a result, you'll have a simple list displaying each slug.

To connect everything together, create a JS file that: 1. Defines the collection on both the client and server 2. Passes the collection to the parent template

This JS file should be accessible by both the client and server.

posts = new Mongo.Collection('posts');

if(Meteor.isClient) {
  Template.parent.helpers({
    posts() {
      return Posts.find();
    }
  });
}

If you want to manipulate 'slug' in the JS file, you can do something like this:

if(Meteor.isClient) {
  Template.innerTemplate.helpers({
    upperCaseSlug() {
      return this.slug.toUpperCase();
    }
  });
}

Then, reference upperCaseSlug in your template, like so:

<template name=innerTemplate>
  <li>{{upperCaseSlug}}</li>
</template>

Answer 3

Answer №2

Let's delve into the world of Meteor:

Avoid encountering this kind of pattern at all costs:

<script type="text/javascript>
...some code
</script>

Meteor consolidates all your JavaScript files into one large file and automatically includes it in your application. There should be no need for you to manually declare scripts as shown above.

Furthermore, there is no necessity to retrieve the value of a data object by inspecting the DOM. The data context within each template provides your data accessible through the variable this.

Whether in a helper function or within a template event, referencing this guarantees that you are accessing the precise data being presented within that template instance.

Upon reviewing your template code, it becomes evident that your template lacks a data context - although you establish the data context within your {{#with post}} and its corresponding helper, it does not result in the creation of the required this one level below.

Hence, @Nathan's guidance was accurate, with the exception that he assumed iteration over a cursor rather than examining a single post.

Extract all HTML content enclosed by your {{#with post}} and {{/with}} tags and transfer it to a fresh template named postDetail. Subsequently, revise your outer template as follows:

<template name="post">
{{#with post}}
  {{> postDetail}}
{{/with}}
</template>

The postDetail template will now automatically inherit a data context equivalent to the post object, enabling your helpers to safely reference this.

Template.postDetail.helper({
  slugURI{
    return "/"+encodeURI(this.slug);
  }
});

Thereafter, within your postDetail template, you can access the encoded slug using:

<a class="so-facebook" target="_blank" href={{slugURI}}>

Answer 4

Let's delve into the world of Meteor:

Avoid encountering this kind of pattern at all costs:

<script type="text/javascript>
...some code
</script>

Meteor consolidates all your JavaScript files into one large file and automatically includes it in your application. There should be no need for you to manually declare scripts as shown above.

Furthermore, there is no necessity to retrieve the value of a data object by inspecting the DOM. The data context within each template provides your data accessible through the variable this.

Whether in a helper function or within a template event, referencing this guarantees that you are accessing the precise data being presented within that template instance.

Upon reviewing your template code, it becomes evident that your template lacks a data context - although you establish the data context within your {{#with post}} and its corresponding helper, it does not result in the creation of the required this one level below.

Hence, @Nathan's guidance was accurate, with the exception that he assumed iteration over a cursor rather than examining a single post.

Extract all HTML content enclosed by your {{#with post}} and {{/with}} tags and transfer it to a fresh template named postDetail. Subsequently, revise your outer template as follows:

<template name="post">
{{#with post}}
  {{> postDetail}}
{{/with}}
</template>

The postDetail template will now automatically inherit a data context equivalent to the post object, enabling your helpers to safely reference this.

Template.postDetail.helper({
  slugURI{
    return "/"+encodeURI(this.slug);
  }
});

Thereafter, within your postDetail template, you can access the encoded slug using:

<a class="so-facebook" target="_blank" href={{slugURI}}>

How to access a pre-rendered Mongo field value in Meteor using JavaScript

Answer №1

Answer №2

Similar questions

Tips for sending additional parameters to an MVC controller without including them in the URL when using the JavaScript window.open method

Using JavaScript in Internet Explorer 11, you can open multiple tabs without the UrlReferrer being null

Having trouble installing Angular 4 with npm?

Using React Router to send selected component to parent element

Tips for maintaining the state of my jQuery accordion menu on my website even after refreshing the page

Creating a bump chart using structured data: A step-by-step guide

simultaneous fading in and out transitions for two distinct elements

Adjust the margin-top of the navigation bar with animation upon clicking the button

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

Determine if an object is already present in a JSON array by comparing their respective IDs

Utilize PHP to process and incorporate webhook information

Struggling to display the default value on a <select> element using the defaultValue prop in React

Guide to leveraging clsx within nested components in React

Enhance your MongoDB document by concatenating another string to a string field using Spring Data

Unable to append item to array in MongoDB collection document

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Is it possible to create a Nuxt.js static website that incorporates a dynamic single-page application built with Vue.js

Django's post-login redirect is stuck in a continuous loop

The website is up and running smoothly, except for encountering an XMLHttpRequest() error when trying to