當用戶用KnockoutJS提交而非自動提交時，在observableArray中更新記錄

我有一個在網格中呈現的observableArray。當用戶點擊一行時，會彈出一個對話框，讓用戶能夠編輯選定的項目。我想讓用戶能夠更新或取消他們的更改，但由於所選記錄是可觀察的，所以立即進行更改。當用戶用KnockoutJS提交而非自動提交時，在observableArray中更新記錄

如何將所選記錄與observableArray分開，以便僅在用戶單擊「更新」時更新數據？

這裏是我的問題的一個簡化版本 - 我fiddle

function Type(data) { 
    this.id = data.id; 
    this.name = ko.observable(data.name); 
}; 

function Location(data) { 
    this.id = data.id; 
    this.name = ko.observable(data.name); 
    this.state = ko.observable(data.state); 
    this.headline = ko.observable(data.headline); 
    this.type = ko.observable(new Type(data.type)); 
}; 

function ViewModel() { 
    var self = this; 

    self.types = types; 
    self.locations = ko.observableArray(ko.utils.arrayMap(seedData, function(item) { 
     return new Location(item); 
    })); 
    self.selectedLocation = ko.observable(); 

    self.edit = function(item) { 
     self.selectedLocation(item); 
    }; 

    self.cancel = function() { 
     self.selectedLocation(null); 
    }; 

    self.update = function(item) { 
     //do something here to push updated Location to locations observableArray 
    }; 
}

來源

2013-03-29 bflemi3

你應該明白，你的'selectedLocation'觀察到將包含** **實際位置的項目，你作中將會在相同的實例反映了所有的編輯。這是因爲JS中的對象是通過引用分配的，而不是按值分配的。閱讀關於*編輯器*模式實施在這裏：http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html –

我認爲你的結構相匹配得不錯，我在上面的評論鏈接的文章中所描述的編輯模式的類型：http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html

對於您的數據，這意味着要跟蹤selectedItem和selectedItemForEditing，這是使用所選項目的數據創建的新Location。

如果用戶取消，那麼你可以把它扔掉。如果用戶接受，則可以將編輯後的項目數據應用到原始選定項目。

本文描述了使用數據填充可觀察對象的創建過程，以便始終可以使用乾淨的數據調用update方法來應用。

這是你擺弄這些技術更新：http://jsfiddle.net/rniemeyer/JQkVs/

來源

2013-03-29 16:04:44

太棒了！再次感謝你Ryan – bflemi3

如果'types'數組超出了'Location'對象的範圍，該怎麼辦？你將如何用適當的'name'更新'type'屬性？ http://jsfiddle.net/bflemi3/JQkVs/4/ – bflemi3

我個人會這樣做：http://jsfiddle.net/rniemeyer/kMNkY/。這簡化了一些事情，並確保我們總是處理對同一「類型」對象的引用。我不使用'optionsValue'綁定，因此它只是將類型設置爲對象。 –

當用戶用KnockoutJS提交而非自動提交時，在observableArray中更新記錄

回答

相關問題