Kendo UI + Angular - v2014.2.903 vs v2014.3.1119 JSFiddle问题

时间:2014-12-01 22:28:07

标签: angularjs kendo-ui jsfiddle

我正在努力将我的一个Angular / Kendo UI项目从v2014.2.903升级到v2014.3.1119。我遇到过一些情况,其中v2014.3.1119破坏了在v2014.2.903中运行良好的功能。我决定创建几个JSFiddles来说明这些问题,但不幸的是,指向v2014.2.903的JSFiddle似乎甚至无法识别Kendo UI。

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不起作用?

1 个答案:

答案 0 :(得分:0)

我发现了这个问题。当使用硬编码的JavaScript对象数组时,Kendo v2014.2.903不喜欢k-ng-delay。