Knockout内联表单更新方法未显示更新的值

时间:2013-07-24 16:54:23

标签: jquery knockout.js

民间

我正在尝试显示内联表单来更新记录。请参阅fiddle here

SetAcceptItem方法正常工作,我可以通过Ajax更新DB记录,并在屏幕上显示After Page load修改后的值。

  

但是没有观察到更新的值并重新显示   屏幕。我不确定这里有什么问题!

我希望在屏幕上显示更新的值,而不需要重新加载页面。

item.update(edited.title)中的{p> SetAcceptItem更新值。

Item = function (data) {
    var self = this;
    self.title = ko.observable(data.title);
    self.searchTerm = ko.observable(data.searchTerm);
    self.update = function (data) {
        self.title(data.title);
       self.searchTerm(data.searchTerm);
    };
};

我的项目中的Ajax代码

        data: sentData,
        success: function (data) {
            //load data
            var recData = data;
            self.item(recData);
        },
        error: function (errorMessage) {

        }

如果我需要添加更多详细信息,请告诉我


  

修改

这是我的KO code,只是想知道原因             item.update(已编辑);未在UI上重新更新值

Item = function (data) {
    var self = this;
    self.title = ko.observable(data.title);
    self.searchTerm = ko.observable(data.searchTerm);
    self.update = function (data) {
        self.title(data.title);
        self.searchTerm(data.searchTerm);
        alert(self.title());
    };
};

var ViewModel = function (items) {
    var self = this;

    self.items = ko.observableArray(ko.utils.arrayMap(items, function (data) {
        return new Item(data);
    }));

    self.TempItem ;

    //selected item
    self.selectedItem = ko.observable();

    self.itemForEditing = ko.observable();

    this.GetSelectItem = function (item) {
        self.selectedItem(item);
        self.itemForEditing(new Item(ko.toJS(item)));
        //self.itemForEditing(item);
    };

    this.SetAcceptItem = function (item) {
        self.TempItem = item;
        var selected = ko.toJS(self.selectedItem());
        var edited = ko.toJS(self.itemForEditing());
        //alert(self.TempItem.title());  //edited value
        //alert(selected.title);  //old value
        //alert(edited.title); //edited value
        //alert(selected.title);  //? it is old  value
        item.update(edited);
        //write ajax query  here to udpate in database
        self.itemForEditing(null);
    };

    this.RemoveItem = function () {
        self.selectedItem(null);
        self.itemForEditing(null);
    };
};

ko.applyBindings(new ViewModel([{
    title: "walls",
    searchTerm: "walls1"
}, {
    title: "health",
    searchTerm: "health2"
}]));

2 个答案:

答案 0 :(得分:0)

你不应该打电话给update(data)吗?

    success: function (data) {
        //load data
        var recData = data;
        self.update(recData);
    },

答案 1 :(得分:0)

管理以解决问题。 Fiddle

使用guard-your-model-accept-or-cancel-edits网站knockmeout上提到的临时对象选项。

AcceptMethod更改为下面的内容

1]在viewmodel.Array中找到请求的ID

2]如果发现更新那个数组

this.SetAcceptItem = function (item) {
        var selected = ko.toJS(self.selectedItem());
        var edited = ko.toJS(self.itemForEditing());
        var targetId = selected.title;
        var recordFound = ko.utils.arrayFirst(self.items(), function (item) {
            return item.title() == targetId;
        });

        if (recordFound) {
            recordFound.title(edited.title);
        }
        //write ajax query  here to udpate in database
        self.itemForEditing(null);
    };