Как определить, когда DataSource больше не используется
У меня есть страница с сеткой кендо. Когда пользователь выбирает строку в сетке, я обновляю шаблон и другую сетку с зависимой информацией. Я делаю это, создавая два новых источника данных и связывая их (см. Код ниже).
Для поддержки оперативных обновлений, которые я хочу прикрепить, в init() DataSource обработчик событий к веб-сокету, чтобы обнаружить изменения в серверной части для этого DataSource (в основном модель подписки). Моя проблема в том, что на этой странице, так как каждый раз, когда пользователь выбирает элемент, я получаю еще два источника данных, и поэтому я получаю множество обработчиков событий, запускающих для источников данных, которые больше не используются. Я хотел бы как-нибудь их почистить.
Я вижу несколько способов справиться с этим:
- Иметь событие, которое срабатывает, когда источник данных больше не используется, поэтому я могу отменить регистрацию обработчика и отписаться.
- Вместо того, чтобы каждый раз создавать новый источник данных, просто каждый раз меняйте URL в транспорте. Но тогда я бы хотел, чтобы какое-то событие сработало при изменении транспорта, чтобы обработчик событий знал, что необходимо изменить подписку.
- Что я сейчас делаю: добавляю в DataSource собственный метод, называемый nuke (), который я вызываю непосредственно перед созданием нового DataSource. Ошибка склонна, но функциональна.
Или я иду по этому пути совершенно неправильно? Возможно, есть какой-то общий способ вызвать изменения в объектах кендо?
Ниже приведен код, демонстрирующий наивный подход, который вызывает проблему. Это также доступно здесь: http://dojo.telerik.com/OKaDu
Обратите внимание, что пример кода использует фильтры, но в моем реальном коде меняется URL. Хотя, если есть способ активировать смену фильтров, это было бы здорово.
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.624/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.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<div id="detail">
Employee ID: <span data-bind="text: EmployeeID"></span><br>
FirstName: <span data-bind="text: FirstName"></span><br>
LastName: <span data-bind="text: LastName"></span><br>
</div>
<div id="orders"></div>
<script>
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 450,
selectable: "row",
sortable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "Country"
},
{
field: "City"
},
{
field: "Title"
}
],
change: function(e) {
var selectedRows = this.select();
var dataItem = this.dataItem(selectedRows[0]);
var remoteDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize:6,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
});
remoteDataSource.fetch(function(){
kendo.bind("#detail", remoteDataSource.view()[0]);
});
$("#orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize:6,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: 70 },
{ field: "ShipCountry", title:"Ship Country", width: 100 },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: 200 }
]
});
}
});
</script>
</body>
</html>