【发布时间】:2018-07-13 08:18:14
【问题描述】:
我注意到我的应用程序中的所有组合框都有一些奇怪的行为,一段时间后我注意到 Kendo UI 组合框两次发出或触发更改事件,因此如果里面的代码有一个,它们会发出两个 http 请求 我搜索了很多,但没有找到任何帮助
- 我将组合框与 angularjs k-options(用于常规选项)和 k-on-change 属性一起用于更改事件处理程序
- 我尝试实现没有 angularjs 属性的组合框,就像正常使用 kendo ui 组合框一样,它给出了相同的行为
- 我没有使用 alert 来调试这个问题,而是使用了 console.log 来解决这个问题
- 我用fiddler监听http请求,发现任何变化都有两个请求
- 我什至尝试并更改了 post 和 params to data 的请求,但也发现了同样的问题
代码示例:
html;
<select id="id" kendo-combo-box k-options="options" k-on-change="change(kendoEvent)" class="class" required></select>
“脚本标签”中的代码
var app = angular.module('app', ['blockUI', 'kendo.directives']);
app.controller("controller",
function($scope, $http) {
$scope.GetAllData = function() {
$scope.comboDataSource = new kendo.data.DataSource({
data: @Html.Raw(Json.Encode(ViewBag.listFromC#)) // before loading view we're assigning the viewbag with alist of data
});
$scope.options = {
autoWidth: true,
filter: "contains",
ignoreCase: true,
placeholder: "Choose ...",
syncValueAndText: true,
dataTextField: "Name",
dataValueField: "Id",
dataSource: $scope.comboDataSource
};
}
}
$scope.change = function (kendoEvent) {
// kendoEvent.preventDefault(); // this line was added to test if it will prevent the second request or change event firing
console.log('change fired');
var cbAnother = $("#cbAnother").data("kendoComboBox"); // those two lines has no effect if removed
cbAnother.setDataSource([]);
if (!kendoEvent.sender.value()) { // this if statement has no effect if removed
return;
}
$http({
method: "get",
url: "@Url.Action("Action", "MVCControler", new {area = "Area"})",
params: { Id: kendoEvent.sender.value() }
}).then(function(response) {
var dataS = new kendo.data.DataSource({
data: response.data.ourData
});
$("#cbAnother").data("kendoComboBox").setDataSource(dataS);
},
function() {
....
}
);
};
其余代码.... 我很确定我会正确结束所有大括号
【问题讨论】:
标签: c# jquery angularjs combobox kendo-ui