2012-08-22 3 views
0

아무도 도와 줄 수 없으며 앞으로 나아갈 수있는 방법을 알려줄 수 있습니까?내 JSON 데이터를 기반으로 드롭 다운을 표시하는 KnockOutJS 받기

KnockoutJS를 사용하여 샘플 앱을 만들려고합니다. MVC를 배우고 jQuery/Knockout을 배우려고합니다.

샘플은 녹아웃 교육 문서의 장바구니 예를 기반으로 - 그것의 내 복사/버전은 여기에 있습니다 :

JsFiddleExample

json으로 상당히 straighforward입니다 :

[{ 
    "occ": [ 
    { 
     "name": "1 Room only", 
     "price": 53.9}, 
    { 
     "name": "1 B&B", 
     "price": 62.16}, ], 

    "TypeName": "Single", 
    "TypeID": "3121", 
    "TypeCount": "2" 
    }, 
{ 
    "occ": [ 
    { 
     "name": "2 B&B", 
     "price": 24.23}, 
    { 
     "name": "2 DBB", 
     "price": 32.95}], 

    "TypeName": "Double", 
    "TypeID": "4056", 
    "TypeCount": "2" 
    }...... 

그래서 첫 번째 드롭 다운은 "TypeName"및 "TypeID"에 연결됩니다.

그 중에서 선택하면 Occ (두 번째 드롭 다운)은 해당 방에서 사용할 수있는 쿠폰을 보여줍니다 (예 : 2 DBB @ 32.95).

현재 원하는 수량을 입력 할 수있는 텍스트 상자가 있습니다. 그러나 JSON에서 "TypeCount"까지 숫자로 제한하고 싶습니다. "TypeCount"까지 숫자가있는 다른 드롭 다운이 있습니다.

"방 추가"를 클릭하고 다른 줄을 추가하면 표시되는 내용을 제한하고 싶습니다. 위의 줄에서 이미 선택한 방 유형을 드롭에 표시하고 싶지는 않습니다. 다운 목록에서 다음 행을 찾으십시오.

답변

1

녹아웃이 ko.utils.range라는 유틸리티를 포함하고 당신이 그것을 시작 및 종료 값을 줄 수있는 포인터에 대한

마크를 주셔서 감사합니다. 이것을 사용하여 1에서부터 TypeCount까지 다양한 옵션을 만들 수 있습니다.

이 그것을 쓰기하는 방법은 여러 가지 있지만, 여기에 하나의 예입니다

<td class='quantity' data-bind="with: category"> 
    <select data-bind="visible: $parent.product, options: ko.utils.range(1, TypeCount), value: $parent.quantity"></select> 
</td> 

업데이트 바이올린 : http://jsfiddle.net/rniemeyer/3t6hP/4/

+0

는 RP-메이어 @ 다시 한번 감사드립니다 - 나는 시도에 대한 부분을 알아낼 수 있습니다 이전에 선택한 방을 제외하고 카트의 다음 줄에서 나는 KnockOut 튜토리얼을 통해 일하고있다 !! 건배, 마크 – Mark

관련 문제