유성에서 동적 템플릿 사용하기

유성 초보자 및 첫 번째 포스터 - 내가 놓친 튜토리얼이나 다른 질문을 가르쳐 주시기 바랍니다. 나는 많은 비슷한 질문이 있다는 것을 알지만, 나는 그들로부터 일반적인 방법을 신봉 할 수 없었다.유성에서 동적 템플릿 사용하기

저는 실제로 유성에서 동적 템플릿을 사용하고 필터를 채워 넣은 데이터에 적용하려고 노력하고 있습니다. 나는 약간 도움을 위해 진짜로 고맙게 여길 것입니다.

간단한 예를 들면, 태그를 사용하여 할 일 목록에 작업을 입력 할 수 있기를 바랍니다. 그런 다음 큰 작업 테이블과 작은 작업 테이블을 별도로 표시 할 수 있기를 바랍니다.

여기 공식 유성판 튜토리얼에서 수정 한 몇 가지 코드를 추출하여 일반적인 의미에서 볼 수 있습니다.

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을 잘못 사용하고 있습니다. 이름이 이고 템플릿이 동적 인을 포함해야합니다.

둘째, Template.dynamic을 사용하면 data=<helper name>입니다. 올바른 형식이지만 Template.body에서 사용하고 있으므로이 도우미는 Template.task이 아닌 Template.body이어야합니다.

그리고 세 번째 문제는 task 템플릿 콘텐츠를 {{#each}}...{{/each}}에 포함하는 것을 잊어 버리는 것입니다.

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

스틱스 - 고마워요. 도우미 함수의 구문을 약간 변경하여 (별도로 자세히)이 작업을 수행 할 수있었습니다. 정말 도움을 주셔서 감사합니다. – Mark

@Mark Glad it helped. 내 대답을 수락하는 것을 잊지 마십시오. – Styx

귀하의 질문에 Template.dynamic 사용에 대한이므로

, 여기 (AN 또 다른이 있지만,이를 구현하기위한 더 좋은 방법) 어떻게해야입니다 동일한 도전에 직면 한 모든 사람들에게 위의 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

유성에서 동적 템플릿 사용하기

답변

관련 문제