Jquery 淘汰动态服务器端数据绑定双向处理
下面的淘汰示例可以很好地在每秒钟之后列出并刷新自己 HTML:Jquery 淘汰动态服务器端数据绑定双向处理,jquery,ajax,knockout.js,Jquery,Ajax,Knockout.js,下面的淘汰示例可以很好地在每秒钟之后列出并刷新自己 HTML: <div class="listing-grid"> <div class="listing_wrapper"> <!--Listing Columns--> <div class="column heading option_cols">
<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>
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)
};
};
问题1)。在用户端,我不能在订单级别输入框中输入新值来更新订单级别,当我选择文本框来输入新值时,所有列表都会更新和刷新。由于此原因,无法让用户更新订单级别
问题#2)。在用户端,当我单击Remove link时,它只是从可观察数组中删除项,而我需要为列出的每个记录在Remove link上设置一个ID,这样当单击Remove按钮时,它会提供一些相同的ID来删除方法,在这个方法中,我们可以运行服务器端Ajax调用来从数据库中删除项。
请在淘汰列表中管理这两个问题的任何逻辑接口?Issue#1)。因为您每1秒调用一次GetDesignations,所以数据将从服务器更新为值。你在期待什么?如果可能的话,请创建一个JSFIDLE。我希望系统允许用户输入值来更新表单。。。现在这种情况并没有发生,因为每当用户尝试输入值时,列表都会被刷新,所有新值都会被列表中的值清除。您已经编写了每秒钟更新表单的代码。如果删除setInterval调用并对该方法进行正常调用,则可以输入值。变量y=window.setInterval(名称_ViewModel.update,1000);。但我认为您需要每秒刷新DB中的值?