Knockout动态服务器端数据绑定双向处理

时间:2014-06-04 04:57:11

标签: jquery ajax knockout.js

下面的淘汰示例适用于列表并在每秒后刷新自己。

HTML

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

的JavaScript

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)。在用户端,当我单击删除链接时,它只是从可观察数组中删除项目,而我需要解析有一个ID,为列出的每个记录设置删除链接,以便当单击删除按钮时,它会提供一些相同的ID来删除方法我们可以在哪里运行服务器端Ajax调用以从数据库中删除项目。

请问在淘汰赛列表中管理这两个事项的任何逻辑接口吗?

0 个答案:

没有答案