Kendo UI: Tek veri kaynağı, iki widget

Question

GÜNCELLEME:Here is a link to reproduce the problem

İLGİLİ:This is another question of mine where similar problems are happening with Kendo UI Map, maybe it could help someone figure this one out! Bu bir batmasına göz ve bir çalışma sürümü vardır.

---

Bir Eğik tek sayfalık uygulamasında Kendo UI DataSource, DropDownList ve Harita kullanırlar.

Hem DropDownList hem de Map için aynı DataSource nesnesini kullanmak istiyorum. Ancak, Harita çok tahmin edilemez bir şekilde davranır. Ben şablonda Harita önce DropDownList koymak

1. , sadece DropDownList nüfuslu alır. Ağ trafiğini incelemek aslında sadece bir isteğin yapıldığını gösteriyor. Önce haritayı koyduğumda, ikisi de nüfuslu ve iki istekte bulunuluyor.
2. transport.read'da hiçbir söz vermediğimde, ancak options.success'u hemen statik bir değerle arayın, her şey beklendiği gibi çalışır. İki çağrı yapılıyor.

Bütün iş günü boyunca saçlarımı çekiyorum, bu yüzden herhangi bir yardım çok takdir ediliyor.

veri kaynağı hizmeti:

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); 
       }); 
      } 
     } 
    }); 
}); 

kontrolör:

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' 
    }]; 
}]); 

görünüm:

<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> 

Burada ne eksik?

Answer 1

Kendo UI Map widget'ında bir hata olabileceğine inanıyorum, çünkü burada ortaya çıkan davranış hiç beklenmeyecek bir şey değildir. Ancak, bir geçici çözümüm var. Veri kaynağını tekil bir nesne olarak döndürmek yerine, onu bir işlev olarak döndürün. Bu muhtemelen ideal değil, ama işe yarıyor.

---

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' 
    }]; 
}); 

Answer 2

Fabrika çoğunlukla talep üzerine örneklerini oluşturmak için kullanılır. İki okuma isteklerini want_ _don't,

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

 
app.factory('dataSourceFactory', function($q) { 
 

 
    function dataSourceFactory() {} 
 

 
    dataSourceFactory.prototype = { 
 
    contentTypes: function() { 
 
    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); 
 
     }); 
 
     } 
 
    } 
 
    }) 
 
    } 
 
    }; 
 

 
    return dataSourceFactory; 
 
}); 
 

 
app.controller('ourController', ['$scope', 'dataSourceFactory', 
 

 
    function($scope, dataSourceFactory) { 
 

 
    var dataSourceFactory = new dataSourceFactory(); 
 

 
    $scope.mapLayers = [{ 
 
    type: 'tile', 
 
    urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #', 
 
    }, { 
 
    type: 'marker', 
 
    dataSource: dataSourceFactory.contentTypes(), // the same data source as before 
 
    locationField: 'Position', 
 
    titleField: 'Title' 
 
    }]; 
 

 
    $scope.ourDataSource = dataSourceFactory.contentTypes(); 
 
    } 
 
]);

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> 
 

 
<div ng-app="ourModule"> 
 
    
 
    <div ng-controller="ourController"> 
 
    \t \t  
 
    <kendo-drop-down-list k-data-source="ourDataSource" 
 
          k-data-text-field="'Title'" 
 
          k-data-value-field="'Title'"> 
 
    </kendo-drop-down-list> 
 

 
    <kendo-map k-zoom="2" 
 
       k-layers="mapLayers"> 
 
    </kendo-map> 
 
    
 
    </div> 
 
</div>

bu JSFiddle demo