2012-10-07 61 views
2

劍道UI DROPDOWNLIST我有我的觀點一個下拉列表,我想在我的view.I希望在改變我的下拉列表,Java腳本模板綁定dropdownlist.i寫這篇文章,但不工作懇求幫助我。綁定checbox名單由MVVM

var roles=[{ 
     code:1, 
     roleName: "Admin", 
     access: [ 
      { id: 1, description: "create", selected: true}, 
      {id: 2, description: "delete", selected: false}, 
      { id: 3, description: "update", selected: false} 
     ] 
    } ,{ 
     code:2, 
     roleName: "user", 
     access: [ 
      { id: 1, description: "create", selected: true}, 
      {id: 2, description: "delete", selected: true}, 
      { id: 3, description: "update", selected: false} 
     ] 
    }]; 
var viewModel = kendo.observable({ 
    Roles:roles, 
    role:"Admin", 
    accessRole:null  
}); 

kendo.bind($("#example"), viewModel); 

這是我的視圖代碼

<div id="example"> 
    Current Role&nbsp;&nbsp;&nbsp;:<span data-bind="text: role"></span> 
    <br> 
    <select type="text" id="RoleName" data-bind="source: Roles, value:role" data-text-field="roleName"> 

    <select/> 

     <ul data-template="row-template" data-bind="source: accessRole.access"></ul> 

</div> 

<script id="row-template" type="text/x-kendo-template"> 
    <li> 
     <input type="checkbox" data-bind="checked: selected" /> 
     <label data-bind="text: description" /> 
    </li> 
</script> 
​ 

,這是onlne代碼: http://jsfiddle.net/shahr0oz/K4X3T/19/

回答

4

我明白了。

<div id="example"> 
    Current Role&nbsp;&nbsp;&nbsp;:<span data-bind="text: role.roleName"></span> 
    <br> 
    <select type="text" data-bind="source: Roles,value:role}" data-text-field="roleName"> 

    <select/> 

     <ul data-template="row-template" data-bind="source:role.access"></ul> 

</div> 

<script id="row-template" type="text/x-kendo-template"> 
    <li> 
     <input type="checkbox" data-bind="checked: selected" /> 
     <label data-bind="text: description" /> 
    </li> 
</script> 

​ var roles=[{ 
     code:1, 
     roleName: "Admin", 
     access: [ 
      { id: 1, description: "create", selected: true}, 
      {id: 2, description: "delete", selected: true}, 
      { id: 3, description: "update", selected: false} 
     ] 
    } ,{ 
     code:2, 
     roleName: "user", 
     access: [ 
      { id: 1, description: "create", selected: false}, 
      {id: 2, description: "delete", selected: false}, 
      { id: 3, description: "update", selected: false} 
     ] 
    }]; 
var viewModel = kendo.observable({ 
    Roles:roles, 
    role:roles[0] 
}); 


kendo.bind($("#example"), viewModel); 

http://jsfiddle.net/shahr0oz/psEVy/