我有数据绑定列表工作良好。在清单中,第一列表示订单级别。所有数据都来自基于Ajax的服务器端。
:
<div class='general_content' id="designations_items">
<div class="listing-grid">
<div class="listing_wrapper">
<!--Listing Columns-->
<div class="column heading option_cols">
Order Level
</div>
<div class="column heading desig_cols">
Designation Name
</div>
<div class="column heading desig_cols">
Job Description
</div>
<div class="column heading option_cols">
Options
</div>
<!--Listing Data-->
</div>
<form name="desig_order_level" action="<?php echo $url?>manage/designation_order_level/" id="desig_order_level">
<div class="listing_wrapper" data-bind="foreach: Designations">
<div class="column data_display option_cols">
<input name="orders[]" data-bind="value: Desig_Order" class="fancyInput_smaller">
</div>
<div class="column data_display desig_cols" data-bind="text: Desig_Name"></div>
<div class="column data_display desig_cols" data-bind="text: Desig_Desc"></div>
<div class="column data_display option_cols">
Remove
</div>
</div>
</form>
</div>
</div>
这是我的JS代码:
function GetDesignations(handleData) {
$.ajax({
url: 'get_designations.php',
type: "post",
data: '',
dataType: 'json',
success: function(data){
handleData(data);
},
error:function(data){
alert('Failed');
}
});
}
$(function () {
var Designation_ViewModel = function() {
var self = this;
self.Designations = ko.observableArray();
self.update = function() {
GetDesignations(function(output){
self.Designations.removeAll();
$.each(output, function (i) {
self.Designations.push(new deisgnation_data_binding(output[i]));
});
});
};
self.addnewItem = function () {
var newitem = JSON.parse('{"Name":"'+$("#Name").val()+'", "Desig_desc":"'+$("#Desig_desc").val()+'"}');
self.Designations.push(
new deisgnation_data_binding(newitem)
);
};
self.removeToDoItem = function(item) {
self.Designations.remove(item);
};
};
var Designation_ViewModel = new Designation_ViewModel();
var y = window.setInterval(Designation_ViewModel.update,1000);
ko.applyBindings(Designation_ViewModel, document.getElementById("designations_items"));
});
var deisgnation_data_binding = function (data) {
return {
Desig_Order: ko.observable(data.Desig_Order),
Desig_Name: ko.observable(data.Desig_Name),
Desig_Desc: ko.observable(data.Desig_Desc)
};
};
几秒钟后,列表将自动更新新记录…在这种情况下,order level也会为每条记录获取新的数据库条目。
问题是,在用户端,我不能在订单级别输入框中输入新值来更新,当我选择文本框输入新值时,由于无法让用户更新订单级别,所有列表都得到更新。
我看到你的记录每1秒更新一次由于
var y = window.setInterval(Designation_ViewModel.update,1000);
我认为这里应该用setTimeout
而不是setInterval
。setTimeout
只执行一次更新功能
window.setTimeout(Designation_ViewModel.update,1000);