2013-07-31 5 views
0

사용자의 목록 옵션을 생성하는 양식이 있습니다. 각 옵션에는 확인란, 레이블 및 입력 필드가 있습니다. 입력란은 체크 박스가 선택되어있는 동안에 만 표시되어야합니다. 옵션은 JSON 호출을 통해 생성됩니다.체크 상자에서 녹아웃 양방향 바인딩이 작동하지 않습니다.

그러나 녹아웃은 보이는 바인딩을 사용할 때 기대했던 것처럼 보이지 않습니다. 행을 검사하면 텍스트 상자가 올바르게 표시되지만 선택을 취소하면 텍스트 상자가 그대로 유지됩니다.

나는 이것이 관측 할 수있는 "selected"가 오버라이드되는 것과 관련이 있다고 생각하지만 나는 아이디어에 매달렸다.

: 여기
<div data-bind="template: { name: 'reason-template', foreach: reasonList }"></div> 

<script type="text/html" id="reason-template"> 
    <div> 
     <input type="checkbox" data-bind="value: selected" /> 
     <span data-bind="text: name"></span> 
     <input type="text" class="datepicker" data-bind="value: date, visible: selected" /> 
    </div> 
</script> 

내가 바이올린에 사용하고있는 자바 스크립트입니다 : http://jsfiddle.net/qccQs/2/ 여기

내가 바이올린에 사용하고있는 HTML은 다음과 같습니다

이 문제를 보여주는 바이올린입니다
function ReasonItem(name) { 
    this.name = ko.observable(name); 
    this.date = ko.observable(null); 
    this.selected = ko.observable(false); 
}; 

function MyViewModel() { 
    var self = this; 
    self.reasonList = ko.observableArray([ ]) 
}; 

var vm = new MyViewModel(); 

new Request.JSON({ 
    url: '/echo/json/', 
    data: { 
     json: JSON.encode({ 
      data: [ 
       { name: "Reason 1", selected: false, date: null }, 
       { name: "Reason 2", selected: false, date: null }, 
       { name: "Reason 3", selected: false, date: null } 
      ] 
     }), 
     delay: 0 
    }, 
    onSuccess: function(response) { 
     $.each(response.data, function(index, reason) { 
      vm.reasonList.push(new ReasonItem(reason.name)); 
     }); 
    } 
}).send(); 

ko.applyBindings(vm); 

예상대로 동작하도록하는 방법에 대한 아이디어가 있습니까?

<input type="checkbox" data-bind="checked: selected" /> 

Knockout Documentation를 참조하십시오 checkbox 유형의 입력의

+0

체크 박스의 경우 '값'이 아닌'checked' 속성을 사용해야합니다. –

답변

2

당신은 checked 대신 value을 사용해야합니다.

+0

그게 문제였습니다! : D 신선한 눈 쌍이 매우 빨리 발견되었습니다. 감사. – Penfold

관련 문제