2014-12-01 73 views
0

我正在將我的Angular/Kendo UI項目中的一個從v2014.2.903升級到v2014.3.1119。我遇到了一些情況,其中v2014.3.1119打破了v2014.2.903中正常工作的功能。我決定創建幾個JSFiddles來說明這些問題,但不幸的是,指向v2014.2.903的JSFiddle似乎甚至不認可Kendo UI。Kendo UI + Angular - v2014.2.903 vs v2014.3.1119 JSFiddle問題

v2014.3.1119的jsfiddle(這工作)... http://jsfiddle.net/lejuan5150/w0711rdg/

v2014.2.903的jsfiddle(這不起作用)...... http://jsfiddle.net/lejuan5150/4svqnaz6/

都包含相同的代碼和配置除了版本他們所參考的Kendo UI。下面是代碼:

HTML:

<div> 

<div data-ng-controller="personController">  

    <div 
     kendo-grid="personGrid" 
     k-options="personGridOptions" 
     k-ng-delay="personGridOptions">  
    </div> 

    <br /> 
    First Name Combo Box: 

    <select 
     kendo-combo-box="firstNameComboBox" 
     k-options="firstNameComboBoxOptions" 
     k-ng-delay="firstNameComboBoxOptions" 
     k-ng-model="selectedPerson.firstName"   
    ></select>   

    <br /> 
    Last Name Combo Box:   

    <select    
     kendo-drop-down-list="lastNameDropDownList" 
     k-options="lastNameDropDownListOptions" 
     k-ng-delay="lastNameDropDownListOptions" 
     k-ng-model="selectedPerson.lastName" 
    ></select>   

</div> 

的JavaScript:

var app = angular 
.module("app", [ 
    "kendo.directives" 
]); 

app.controller("personController", [ 
    "$scope", 
    personController 
]); 

function personController(
    $scope 
){ 
    init(); 

    function init(){ 

     var personData = [{ 
      firstName: "Joe", 
      lastName: "Smith", 
      status: "Active" 
     },{ 
      firstName: "John", 
      lastName: "Smith", 
      status: "Active" 
     },{ 
      firstName: "Travis", 
      lastName: "Smith", 
      status: "Expired" 
     }]; 

     $scope.personDataSource = new kendo.data.DataSource({ 
      data: personData 
     });   

     $scope.firstNamesData = [{ 
      id: "Joe", 
      firstName: "Joe" 
     },{ 
      id: "George", 
      firstName: "George" 
     },{ 
      id: "John", 
      firstName: "John" 
     },{ 
      id: "Travis", 
      firstName: "Travis" 
     }]; 

     $scope.lastNamesData = [{ 
      id: "Jones", 
      lastName: "Jones" 
     },{ 
      id: "Smith", 
      lastName: "Smith" 
     }];   

     bindPersonGrid(); 
     bindFirstNameComboBox(); 
     bindLastNameDropDownList(); 
    } 

    function bindPersonGrid(){ 

     $scope.personGridOptions = { 
      dataSource: $scope.personDataSource, 
      selectable: "row", 
      dataBound: onPersonGridDataBound, 
      change: onPersonGridRowSelected    
     }   
    } 

    function onPersonGridDataBound(){ 

     var grid = this; 
     var firstRow = grid.element.find("tbody tr:first"); 
     grid.select(firstRow); 
    } 

    function onPersonGridRowSelected(
     event 
    ){ 

     var grid = event.sender; 
     $scope.selectedPerson = grid.dataItem(grid.select());  
     $scope.$digest(); 
    } 

    function bindFirstNameComboBox(){ 

     $scope.firstNameComboBoxOptions = { 
      dataSource: $scope.firstNamesData, 
      dataTextField: "firstName", 
      dataValueField: "id" 
     }; 
    }  

    function bindLastNameDropDownList(){ 

     $scope.lastNameDropDownListOptions = { 
      dataSource: $scope.lastNamesData, 
      dataTextField: "lastName", 
      dataValueField: "id" 
     }; 
    }  
} 

有誰知道爲什麼v2014.2.903的jsfiddle不起作用?

回答

0

我發現了這個問題。 Kendo v2014.2.903在使用JavaScript對象的硬編碼數組時不喜歡k-ng-delay。