템플릿에서 함수를 호출하는 Backbone.js는 정의되지 않은 코드를 반환합니다.

Question

나는 todo 응용 프로그램을 구축 중이며 작업 템플릿을 렌더링하는 작업보기가 있으며 모든 작업에는 사용자가 선택한 범주가 있습니다. 각 작업에는 CategoryId 속성이 있습니다. 각 작업의 범주를 표시하고 싶습니다.

getCategoryName: function (categoryId) { 
    return app.Categories.each(function (category) { 
     if (categoryId === category.get('CategoryId')) { 
      return category.get('CategoryName'); 
     } 
    }); 
} 

여기 작업 템플릿입니다 :

<script type="text/template" id="taskTemplate"> 
<div class="view"> 
    <input class="toggle" type="checkbox" <%= Completed ? 'checked' : '' %> /> 
    <label class="title"><%- Description %></label> 
    <section class="info"> 
     <span class="category"><%- this.getCategoryName(CategoryId) %></span> 
    </section> 
    <button class="destroy"></button> 
</div> 
<input class="edit" value="<%- Description %>" /> 
</script> 

내가 getCategoryName 함수를 호출하고 작업의 카테고리 ID를 전달 그래서 작업보기에서 다음과 같은 기능을 가지고있다. 그런 다음 함수는 모든 범주를 반복하고 전달 된 CategoryId가 Category 컬렉션의 범주 ID와 일치하는지 확인한 다음 일치하는 범주의 이름을 반환합니다. 그러나 카테고리가 표시되지 않습니다. 그래서 나는 카테고리의 이름을 적절하게 반환하지 않을 것이라고 생각합니다. console.log 콘솔 콜백 함수에서 콘솔에 나타나지만 반환되지 않습니다.

의견이 있으십니까? 이 문제의 해결책을 제안 해 주시겠습니까? 감사합니다. .

Answer 1

Collection.each 실제로 아무것도 반환하지 않습니다. 단순히 컬렉션의 항목을 반복하고 각 항목에 대한 콜백 함수를 실행합니다. 대신 Collection.find을 사용해야합니다.

getCategoryName: function (categoryId) { 

    //find model that matches 
    var category = app.Categories.find(function (category) { 
    return categoryId === category.get('CategoryId'); 
    }); 

    //return the name if found, otherwise returns undefined 
    if(category) 
    return category.get('CategoryName'); 
}