javascript獲取已經渲染的Mongo字段的值-流星

Question

大家好，非常感謝您的幫助。 根據評論中的建議編輯問題。

我是Mongo和Meteor的新手。

我有一個字段“ slug”的集合“ posts”。

“帖子”模板正確填充了每個帖子的值。 ug值始終類似於“ my-great-post”。

我需要獲取_id的子句的文本值，每次訪問模板時，文本值都會有所不同，對其進行編碼，編寫字符串，然后將字符串吐回到模板中。

嘗試過的事情

• 即使定義了集合並在模板中正確填充了空格鍵值，也無法在模板助手或onRendered中返回“ this.slug”或“ this.data.slug”的值

• “ this”向console.log返回“ [object Object]”

• 當我嘗試對幫助程序進行javascript編碼和傳遞字符串時，應用程序崩潰，可能是我無法從文檔中完全了解幫助程序語法

（為了避免嘗試在模板html中創建腳本，我遵循了注釋中的建議，因此下面是每個對此線程提供幫助的人都要求的更多信息）

-模板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}}

-模板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;
  } 

   // can't get these working in a helper, out of helper they crash the app 
   // console.log(this.slug);   
   // console.log(this.data.slug);

});

Template.post.onRendered( function () {

   // these do not work 
   // 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"
}

如果有人可以使用任何方法解決此問題，我將以最強烈的喜悅和感激之情接受答案。

Answer 1

問題可能出在父模板上，而不是這個模板上。 流星的工作方式是將JS文件與HTML分開，因此不要嘗試在HTML中包含<script>標記。

第一件事是您必須將所有文檔加載到客戶端中。 （注意：一旦掌握了這些要點，就可以擔心只加載所需的文檔）。

為此，您需要收藏和出版物。 默認情況下，所有集合都會自動完全發布，因此，除非您刪除了自動發布的模塊，否則我將假定它仍處於加載狀態。

因此，讓我們從父模板開始。 在這種情況下，我將遍歷集合中的所有帖子，並使用innerTemplate顯示它們。

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

現在我們的內部模板可能如下所示：

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

最終結果將是每個子彈的簡單列表。

現在，要將所有內容鏈接在一起，我們需要創建一個JS文件，該文件將：1.在客戶端和服務器上定義集合2.將集合傳遞給父模板

客戶端和服務器都可以訪問該文件。

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

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

現在，如果您想對JS文件中的“ slug”進行操作，則可以執行以下操作：

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

然后，您可以在模板中引用upperCaseSlug ，如下所示：

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

Answer 2

關於流星的幾件事：

您永遠都不會看到這樣的模式：

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

因為Meteor將您的所有 js文件合並為一個大文件，並自動將其包含在您的應用程序中。 您永遠不必以這種方式聲明自己的腳本。

其次，您永遠不必通過讀取DOM來獲取數據對象的值。 每個模板的數據上下文在變量this為您提供數據。

在輔助事件或模板事件中，您都可以參考this並確保可以准確獲取在該模板實例中顯示的數據。

現在，您已經看到了模板代碼，很明顯，您的模板沒有數據上下文-您在{{#with post}}及其關聯的幫助器中設置了數據上下文，但最終並沒有創建this上下文， this您需要在以下一級。

所以... @Nathan處在正確的軌道上，只是他認為您正在遍歷光標而不是僅僅看一個帖子。

取出{{#with post}}和{{/with}}之間的所有html並將其放入新模板中，說出postDetail然后制作外部模板：

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

現在，您的postDetail模板將自動獲得一個與post對象相等的數據上下文，並且您的助手可以安全地引用this 。

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

然后，在您的postDetail模板中，您可以使用以下代碼獲取編碼的代碼塊：

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