JavaScriptがMongoフィールドの値をすでに取得している - 流星

Question

皆さん、ありがとうございました。質問はコメント内の提案ごとに編集されます。

私はMongoとMeteorを初めて使っています。

私はフィールド "slug"を持つコレクション "posts"を持っています。

"投稿"テンプレートには、各投稿の値が正しく入力されています。スラグの価値は、常に「私の偉大なポスト」のようなものです。

_idのスラッグのテキスト値を取得する必要があります。この値は、テンプレートにアクセスするたびに異なり、エンコードし、文字列を書き出し、その文字列をテンプレートに戻します。

物事は、コレクションが定義されていても、テンプレートヘルパーやonRenderedのいずれかで「this.slug」または「this.data.slug」の値を返すことはできません

• を試してみましたが、正しく移入しますテンプレート

• 「この」戻る「[対象オブジェクト]」の値を宇宙・天体バーIがジャバスクリプトエンコードするとき

• アプリケーションがクラッシュをCONSOLE.LOGから文字列を提供しますおそらく私は完全に（私はそう下記、テンプレート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

いくつかのこと：

は、次のようなパターンを見ることはないはずです。

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

流星が一つの大きなファイルにすべてあなたのjsファイルを組み合わせて、あなたのアプリケーションで自動的にそれが含まれているため。このように独自のスクリプトを宣言する必要はありません。

第2に、DOMを読み取ってデータオブジェクトの値を取得する必要はありません。各テンプレートのデータコンテキストは、変数thisにデータを提供します。

ヘルパーまたはテンプレートイベントのいずれかで、thisを参照することができ、テンプレートのそのインスタンスに表示されているデータを正確に取得することが保証されます。あなたの{{#with post}}とそれに関連するヘルパー内のデータコンテキストを設定するが、それはあなたが1レベル下を必要とするthisを作成するまで終わらない -

は今、それはあなたのテンプレートが何のデータコンテキストを持っていないことが明らかだあなたのテンプレートコードを見ました。

だから@Nathanはちょうど1つのポストを見るのではなく、あなたがカーソル上を反復していると仮定していたことを除いて、正しい軌道に乗っていました。

はあなたの{{#with post}}と{{/with}}の間にあなたが持っているすべてのhtmlを取り、新しいテンプレートに入れ、postDetailは、あなたの外側のテンプレートを作ると言う：

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

今すぐあなたのpostDetailテンプレートがポストに等しいデータコンテキストを取得しますオブジェクトは自動的にthisを参照することができます。

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

は、その後、あなたの postDetailテンプレートにあなたがエンコードされたスラグを得ることができます。

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

Answer 2

問題ではなく、この1よりも、親テンプレートである可能性があります。 Meteorが動作する方法は、JSファイルがHTMLから分離されているため、HTMLに<script>タグを含めることを試みないでください。

最初に、文書をすべてクライアントに読み込む必要があります。 （注：一度それを知っていれば、必要な文書を読み込むだけで心配することができます）。

これを行うには、コレクションと出版物が必要です。デフォルトでは、すべてのコレクションは自動的に完全に公開されるため、autopublishedモジュールを削除しない限り、まだ読み込まれていると仮定します。

親テンプレートから始めましょう。この場合は、コレクション内のすべての投稿をループし、innerTemplateを使用して表示します。

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

そして今、私たちの内側のテンプレートは次のようになります。

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

最終結果は、各スラグとの単純なリストになります。親テンプレート

このファイルには、必要があるにコレクションを渡す 1.クライアントとサーバーの 2の両方でコレクションを定義します。

は今、一緒にすべてをリンクするために、我々はなりJSファイルを作成する必要がありますクライアントとサーバーの両方にアクセス可能でなければなりません。以下のように、そして、

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

は、あなたがあなたのテンプレートでupperCaseSlugを参照することができます：あなたはJSファイルの「スラグ」と何かをしたい場合は

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

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

さて、あなたはこのような何かを行うことができますしたがって、

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