Javascript 剑道UI：一个数据源，两个小部件

更新：

相关：它有一个失败版本和一个工作版本

---

我在一个有角度的单页应用程序中使用KendoUI的数据源、DropDownList和Map

我想对DropDownList和Map使用相同的数据源对象。但是，贴图的行为非常不可预测

当我在模板中将DropDownList放在Map之前时，只有DropDownList会被填充。检查网络流量表明，实际上只发出了一个请求。当我把地图放在第一位时，它们都会被填充，并发出两个请求

当我在

transport.read

中不使用任何承诺时，只需调用

选项即可。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>

---

我在这里遗漏了什么？

我相信这可能是剑道UI映射小部件中的一个bug，因为这里发生的行为根本不是人们所期望的。不过，我确实有一个变通解决方案。与其将数据源作为单例对象返回，不如将其作为函数返回。这可能并不理想，但它确实有效

---

---

工厂主要用于按需创建实例。看这个例子

var-app=angular.module（'ourModule'，['kendo.directives']）；
app.factory（'dataSourceFactory'，函数（$q）{
函数dataSourceFactory（）{}
dataSourceFactory.prototype={
contentTypes:function（）{
返回新的kendo.data.DataSource({
运输：{
阅读：功能（选项）{
$q.when(
[{
职位：[1,1]，
标题：“第一名”
}, {
职位：[10,10]，
标题：“第二名”
}])
.然后（函数（结果）{
选项。成功（结果）；
});
}
}
})
}
};
返回数据源工厂；
});
app.controller（'ourController'，['$scope'，'dataSourceFactory'，
函数（$scope，dataSourceFactory）{
var dataSourceFactory=新的dataSourceFactory（）；
$scope.mapLayers=[{
类型：'tile'，
URL模板：'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= 缩放#/#=y#/#=x#'，
}, {
类型：'标记'，
dataSource:dataSourceFactory.contentTypes（），//与以前相同的数据源
locationField:'位置'，
titleField:“标题”
}];
$scope.ourDataSource=dataSourceFactory.contentTypes（）；
}
]);

但是，您不需要两个读取请求。它是一个共享数据源，那么，为什么您希望它请求相同的数据两次呢？至于它为什么不绑定到数据，我们可能需要一个复制这种行为的公共示例。很难按原样推断。@Brett:的确，我不想要两个请求，但即使我禁用自动绑定并手动调用
fetch
，结果也是一样的。我觉得如果我将测试用例简化为尽可能简单的话，就更容易弄清楚了。我来看看是否可以设置一个公共示例。这可能是因为
ourDataSource
是一个返回新数据源对象的工厂吗？试着把它作为一个单身汉退回。@Brett:我会试试你的建议。同时，我编写了一个示例，显示了实际问题，请参见编辑后的问题@布雷特：当我想到它时，
工厂
已经在AngularJS中创建了一个单例，除非我弄错了？
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'
  }];
});