流星でのダイナミックテンプレートの使用

流星初心者初回ポスター - 私が逃したチュートリアルやその他の質問を教えてください。私は、似たような疑問がたくさんあることを認識していますが、私はそれらから一般的な方法を信じることができませんでした。流星でのダイナミックテンプレートの使用

私は流星で動的テンプレートを使用しようとしていて、それらにデータを取り込むデータにフィルタを適用しようとしています。私はいくつかの助けに本当に感謝しています。

簡単な例を挙げれば、タスクを大きなタスクであるか少しタスクであるかに関わらず、タスクリストにタグを付けて入力することができます。それでは、大きな仕事のテーブルと小さな仕事のテーブルを別々に表示できるようにしたいと思います。

公式の流星のチュートリアルから修正されたいくつかのコードの抜粋がありますので、私がしようとしていることを一般的な意味で見ることができます。

body.htmlエキス

<body> 
    <div class="container"> 
    <header> 
     <h1>Todo List</h1> 

     <form class="new-task"> 
      <input type="text" name="text" placeholder="Type to add new tasks" /> 
      <input type="text" name="taskType" placeholder="Big/little" /> 
      <button type = "submit">submit</button> 
     </form> 
    </header> 
    <h1>big tasks</h1> 
    <ul> 
     {{> Template.dynamic template="task" data=bigTasks}} 
    </ul> 
    <h1>little tasks</h1> 
    <ul> 
     {{> Template.dynamic template="task" data=littleTasks}} 
    </ul> 
    </div> 
</body>

task.htmlエキス

<template name="task"> 
    <li class="{{#if checked}}checked{{/if}}"> 
    <button class="delete">&times;</button> 

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> 

    <span class="text">{{text}}</span> 
    </li> 
</template>

task.jsは、私は、これはもう少しおそらく、チュートリアルのための要求であると認識

Template.task.helpers({ 
    bigTasks() { 
    return Tasks.find({}, { taskType: Big, sort: { createdAt: -1 } }); 
    }, 
}); 

Template.task.helpers({ 
    littleTasks() { 
    return Tasks.find({}, { taskType: Little, sort: { createdAt: -1 } }); 
    }, 
});

を抽出します特定の質問よりも、あなたが提供できるものに感謝します

ありがとうございます。

出典

2017-09-22 Mark

コードには多数の問題があります。

まず、Template.dynamicを間違った方法で使用しています。テンプレート名には、というダイナミックというテンプレートが含まれています。

第2に、Template.dynamicを使用すると、data=<helper name>が使用されています。これは正しい形式ですが、Template.bodyで使用しているので、これらのヘルパーもTemplate.taskではなく、Template.bodyである必要があります。

第3の問題は、taskテンプレートのコンテンツを{{#each}}...{{/each}}にラップするのを忘れたことです。（これを実装するための別の、より良い方法があるが）、あなたの質問はここで、Template.dynamicの使用についてであるとして

はどのようにすべきである：

Template.body.helpers({ 
    bigTasks() { 
    const tasks = Tasks.find({}, { taskType: Big, sort: { createdAt: -1 } }).fetch(); 
    return { tasks }; 
    }, 
    littleTasks() { 
    const tasks = Tasks.find({}, { taskType: Little, sort: { createdAt: -1 } }).fetch(); 
    return { tasks }; 
    }, 
});

task.html：

<template name="task"> 
    {{#each tasks}} 
    <li class="{{#if checked}}checked{{/if}}"> 
     <button class="delete">&times;</button> 
     <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> 
     <span class="text">{{text}}</span> 
    </li> 
    {{/each}} 
</template>

出典

2017-09-22 09:32:17 Styx

Styx - ありがとうございます。ヘルパ関数の構文を少し変更して（私はこれを動作させることができました）本当にあなたの助けに感謝し、すべての最高！ – Mark

@Mark Gladそれは助けた。私の答えを受け入れることを忘れないでください。 – Styx

同じ問題に遭遇した人には、上記のStyxの答えが働いていますが、ヘルパー関数の構文を少し変更する必要があることがわかりました：

Template.body.helpers({ 
    bigTasks() { 
    // Show newest tasks at the top 
    const tasks = Tasks.find({taskType: "Big"}, {sort: { createdAt: -1 } }).fetch(); 
    return { tasks }; 
    }, 
    littleTasks() { 
    // Show newest tasks at the top 
    const tasks = Tasks.find({taskType: "Little"}, {sort: { createdAt: -1 } }).fetch(); 
    return { tasks }; 
    }, 
});

スティクス - とても感謝しています。この初心者が自分の道を見つけるのを手伝ってくれて本当にありがとう。ではごきげんよう！

出典

2017-09-24 05:40:22 Mark

流星でのダイナミックテンプレートの使用

答えて

関連する問題