Kendo UI:一个数据源,两个小部件

Question

更新: 这是一个重现问题的链接

相关: 这是我的另一个问题,剑道UI地图发生了类似的问题,也许它可以帮助有人解决这个问题!它有一个失败和一个工作版本.

---

我在Angular单页面应用程序中使用Kendo UI的DataSource,DropDownList和Map.

我想为DropDownList和Map使用相同的DataSource对象.但是,Map的行为方式非常不可预测.

1. 当我将DropDownList放在模板中的Map 之前时,只会填充DropDownList.检查网络流量显示确实只有一个请求正在进行.当我首先放置Map时,它们都会被填充并且会发出两个请求.
2. 当我不使用任何承诺transport.read,但只是options.success立即使用静态值调用时,一切都按预期工作.正在进行两次通话.

在整个工作日里,我一直在梳头,所以任何帮助都非常感谢.

数据源服务:

m.factory('ourDataSource', function(foo, bar, baz) {
    return new kendo.data.DataSource({
        transport: {
            read: function(options) {
                foo().then(function (result) {
                    return bar(result);
                }).then(function (result) {
                    return baz(result);
                }).then(function (result) {
                    options.success(result);
                }).catch(function (err) {
                    options.error(err);
                });
            }
        }
    });
});

控制器:

m.controller('ourController', ['ourDataSource', function(ourDataSource) {

    // set the data source of the dropdownlist
    this.ourDataSource = ourDataSource;

    // set up the map layers
    this.mapLayers = [{
        type: 'tile',
        urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #',
    }, {
        type: 'marker',
        dataSource: ourDataSource, // the same data source as before
        locationField: 'Position',
        titleField: 'Title'
    }];
}]);

风景:

<div ng-controller="ourController as ctrl">

    <select kendo-drop-down-list
            k-data-text-field="'Title'"
            k-data-value-field="'Title'"
            k-data-source="ctrl.ourDataSource"></select>

    <div kendo-map
         k-zoom="2"
         k-center="[1, 1]"
         k-layers="ctrl.mapLayers">
    </div>

</div>

我在这里错过了什么？

Answer 1

我相信这可能是 Kendo UI Map 小部件中的一个错误，因为这里发生的行为根本不是人们所期望的。不过，我确实有一个解决方案。不要将数据源作为单例对象返回，而是将其作为函数返回。这可能并不理想，但它确实有效。

angular.module('ourModule', ['kendo.directives'])
.factory('getDataSource', function ($q) {
  return function() {  // return a function that creates a new data source
    return new kendo.data.DataSource({
      transport: {
        read: function (options) {
          $q.when([
            {Position: [1, 1], Title: 'First place'},
            {Position: [10, 10], Title: 'Second place'}
          ]).then(function (result) {
            options.success(result);
          });
        }
      }
    });
  };
})
.controller('ourController', function (getDataSource) {
  this.ourDataSource = getDataSource();      
  this.mapLayers = [{
    type: 'tile',
    urlTemplate: '...removed for brevity...'
  }, {
    type: 'marker',
    dataSource: getDataSource(),
    locationField: 'Position',
    titleField: 'Title'
  }];
});