녹아웃 js의 중첩 템플릿에서 동적 데이터 바인딩

Question

MVC 프레임 워크와 녹아웃 js 조합을 사용하고 있습니다. 나는 녹아웃 js에 조금 새다. 내 중첩 된 녹아웃 템플릿에서 API 호출을 통해 동적으로 데이터를 바인딩해야합니다. 나는 그것을하는 방법에 대해 어떤 방법을 찾고 있지 않다.

enter code here 
<div data-bind="template: {name: 'ListTemplate', foreach: Data}"> 
</div> 

<script type="text/html" id="ListTemplate"> 
    <h3> 
     Contributions (${ Count }) 
    </h3> 
    <img src=" ${ Image } " /> 
    <p> 
     <span> ${ Name } </span> 
     <div data-bind="template: {name: 'goalsTemplate', foreach: goals}"></div> 
    </p> 
</script> 

<script type="text/html" id="goalsTemplate"> 
    Goal: 
    <a href="#"> ${ Goals } </a> Ends on 
    <code> ${ Date } </code> 
</script> 

내 뷰 모델은 다음과 같습니다 :

내 중첩 된 템플릿은

var viewModel = {(
    Data: ko.observableArray([]), 
    goals: ko.observableArray([]) 
}); 

function userData(Count, Image, Name) { 
     return { 
      Count: ko.observable(Count), 
      Image: ko.observable(Image), 
      Name: ko.observable(Name) 
     }; 
} 

function goalDetail(Goals, Date) { 
     return { 
      Goals: ko.observable(Goals), 
      Date: ko.observable(Date) 
     }; 
} 

$(document).ready(function() { 
    $.ajax({ 
      type: "GET", 
      url: siteBaseUrl + 'api/Detail', 
      dataType: 'json', 
      success: function (data) { 
       $(data).each(function (index, type) { 
        viewModel.Data.push(new userData(..,..,..)); 
       }); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert('error status code:' + xhr.status); 
       alert('error message:' + thrownError); 
       alert('error details:' + xhr.responseText); 
      } 
     }); 
}); 

어떻게 데이터 배열 내부 기능 (goalDetail)를 통해 목표 배열에 데이터를 바인딩해야합니까?

Answer 1

나의 이해, 목표 및 데이터는 메인 뷰 모델의 일부입니다 당으로

와 바인딩의 Foreach 내부에 상위 뷰 모델을 사용하려면, 그 경우에 당신이 필요로하는 모든 아래

<div data-bind="template: {name: 'goalsTemplate', foreach: $parent.goals}">