2013-07-31 71 views
0

我有生成該用戶的列表選項的形式,每個選項都有一個複選框,標籤和輸入框。只有在勾選複選框時才顯示輸入字段。這些選項是通過JSON調用生成的。淘汰賽雙向綁定不工作的複選框

然而,淘汰賽似乎並沒有做什麼用可見光綁定時我本來期望。當我檢查一行時,文本框顯示正確,但是當我取消選中時,文本框保持顯示。

我懷疑這是一些待辦事項與觀察的「選擇」正在被超越或類似的東西,但我堅持的想法。

下面是該問題的一個小提琴:http://jsfiddle.net/qccQs/2/

這裏是我使用的小提琴的HTML:

<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> 

這裏是我使用的小提琴的JavaScript:

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); 

關於如何讓這個行爲像我預期的那樣有什麼想法?

+0

對於checkboxs你需要使用屬性'checked'不'value' –

回答

2

checkbox類型的輸入你需要使用checked,而不是value

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

Knockout Documentation

+0

這是問題! :D一雙新鮮的眼睛很快就發現了。謝謝。 – Penfold