kendo複選框已檢查綁定。無法綁定到一個複選框陣列

Question

我有一個複選框數組，我想用它作爲一個數組，例如在一組選項中設置單個iitems並檢索組的值。 對於單個複選框，我可以設置它並獲得點擊事件，作爲一個數組我沒有得到任何東西。

HTML代碼：

<div class="k-group" id="chkbox-options"> 
    <label> 
     Red 
     <input type="checkbox" id="chk1" value="Red" data-bind="checked: colors" /> 
     Green 
     <input type="checkbox" id="chk2" value="Green" data-bind="checked: colors" /> 
     Blue 
     <input type="checkbox" id="chk3" value="Blue" data-bind="checked: colors" /> 
    </label> 
    </div> 

Javascript代碼：

<script type="text/javascript"> 
     var colordata = null; 
     $(document).ready(function() { 
      colordata = kendo.observable({ 
       colors: ["Blue"] 
      }); 
      kendo.bind($("chkbox-options"), colordata); 
      $("#dump-values").click(function() { 
       kendoConsole.log(colordata.colors.toString()); 
      }); 
      $("#chk1").click(function() { 
       kendoConsole.log("click chk1"); 
       if (this.checked) { 
        kendoConsole.log("click chk1 true"); 
       } 
      }); 
     }); 
    </script> 

我可以在單個複選框獲得單擊事件，而我不能設置在kendo.observable複選框的值在字段var colordata。

我在kendo文檔中看到了一個類似的例子，但我無法使它工作。

感謝您的幫助

馬爾科

Answer 1

幾點： 1. kendo.bind＃缺少的DIV ID chkbox選項 2.你需要閱讀改變顏色內更改可觀察對象的事件。更改發生在點擊事件之後，因此在點擊事件中您總是看到舊數據。

我已經糾正你的jsfiddle：http://jsfiddle.net/whizkid747/rPjjJ/4/

var colordata = null; 
     $(document).ready(function() { 
      colordata = kendo.observable({ 
       colors: ["Blue"] 
      }); 
      kendo.bind($("#chkbox-options"), colordata); 

      colordata.bind("change", function(e) { 
       var selectedColors = ''; 

       $.each(colordata.colors, function(key, value){ 
        selectedColors = selectedColors + " " + value; 
       }); 
       if(colordata.colors.length == 0){ 
        console.log('no colors selected'); 
       }else{ 
       console.log('selected colors:' + selectedColors); 
       } 
      });    
     });