0

MVC에서 JSON 문자열로 만드는 간단한 viewModel이 있습니다.이를 수행하기 위해 ko.mapping을 사용하고 있습니다.ko.observable 배열을 foreach 루프에 바인드 할 수 없습니다.

var initialTicketData = {"Ticket": [{"ID":1,"EventID":506596,"Name":"General Admission","Quantity":100,"Price":15.0},{"ID":2,"EventID":506596,"Name":"Backstage Passes","Quantity":25,"Price":50.0}]}; 

var ticketViewModel = ko.mapping.fromJS(initialTicketData); 

ko.applyBindings(ticketViewModel); 

이 배열을 반복하고 페이지에 데이터를 표시하려고합니다. foreach 데이터 바인딩을 사용하려고합니다.

<tbody data-bind="foreach: ticketViewModel.Ticket"> 
    <tr> 
     <td data-bind="text: ticketViewModel.Name"></td> 
     <td data-bind="text: ticketViewModel.Price"></td> 
     <td data-bind="text: ticketViewModel.Quantity"></td> 
    </tr> 
</tbody> 

그러나 실행하려고하면 다음 오류가 발생합니다.

"Unable to parse bindings. Message: ReferenceError: ticketViewModel is not defined; Bindings value: foreach: ticketViewModel.Ticket"

모든 도움을 주시면 감사하겠습니다.

답변

1

대신을 시도해보십시오

<tbody data-bind="foreach: Ticket"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td data-bind="text: Price"></td> 
     <td data-bind="text: Quantity"></td> 
    </tr> 
</tbody> 

바인딩은 항상 현재 상황을 기준으로합니다. ko.applyBindings(ticketViewModel);라고 말하면 "루트"컨텍스트는 ticketViewModel으로 설정됩니다. 그런 다음 'foreach'를 사용하면 새로운 컨텍스트를 추가하고 'foreach'내부의 바인딩은 이제 각 Ticket 요소와 관련이 있습니다.

+0

나는 그것을 시도했지만 여전히 실패했다. 내가 언급하지 못한 약간의 정보는이 페이지에 두 가지 모델이 첨부되어 있다는 것입니다. 다른 모델 인 "eventViewModel"에는 ko.observables 만 있고 매핑 플러그인을 통해로드되며 "eventViewModel.Name"을 사용하여 이벤트 이름에 바인딩합니다. 이 모델은 모두 잘 작동합니다. – digitzfone

+0

페이지에 ViewModel이 둘 이상있는 경우 : 1) 두 개의 하위 모델이 포함 된 큰 ViewModel을 만들고'ko.applyBindings (viewModel);'을 실행 한 다음에'with : ticketViewModel' 바인딩을 사용하여 영역을 하위 모델의 범위로 지정합니다. 2)'ko.applyBindings (ticketViewModel, document.getElementById ('someElementId'));'형식을 사용하여 DOM의 특정 섹션에 대한 루트보기 모델을 설정합니다. –

+0

혼란스러워 ... 어느 쪽이든 ... ...? 페이지 당 여러 개의보기 모델을 사용하는 것이 바람직하지 않습니까? – digitzfone