我有可觀察的數組綁定到UI上的html字段。使用陣列裏面的基因敲除可觀察
但是,UI上這些字段的更改沒有反映在視圖模型中,因爲按照Knockout文檔,observableArray會跟蹤數組中的哪些對象,而不是這些對象的狀態。
代碼看起來如下:
var RewardMissionModel = function() {
var self = this;
self.achievementID = ko.observable();
self.rewardAsset = ko.observable();
self.rewards = ko.observableArray([new Reward("Points", "Qty", "", "Item", "")]);
self.isDirty = false;
//Add reward
self.addReward = function() {
//var self = this;
var tempRewardType = "Points";
self.rewards.push(new Reward(tempRewardType, "Qty", "", "Item", "", 0));
};
//Remove reward
self.removeReward = function (reward) {
if (self.rewards().length > 1)
self.rewards.remove(reward);
};
//------------------------------------------------------------------------------
};
function Reward(rewardType, quantityLabel, rewardQuantity, itemLabel, item, itemID) {
var self = this;
//self.viewModel = viewModel;
self.rewardTypes = ["Points", "Coins", "Items"];
self.rewardType = ko.observable(rewardType);
self.itemLabel = ko.observable(itemLabel);
self.itemText = ko.observable(item);
self.quantityLabel = ko.observable(quantityLabel);
self.rewardQuantity = ko.observable(rewardQuantity);
this.selectedRewardType = ko.observable(rewardType);
self.isItemType = function (selectedRewardType) {
return selectedRewardType === this.selectedRewardType();
}
self.itemID = ko.observable(itemID);
}
HTML代碼:
<div data-bind="template: { name: 'rewards-template', foreach: rewards }"></div>
<script type="text/html" id="rewards-template">
<span style="margin-left:30px">Reward Type</span>
<select class="dropdown" data-bind="options: rewardTypes, value: selectedRewardType"></select>
<span data-bind="text: itemLabel, visible: isItemType('Items')"></span>
當添加或移除對象到可觀察到的陣列的視圖模型髒標誌置位,但是當我修改上它不被考慮。
其中一種方法可能是將普通數組放入可觀察對象中。
是否有任何代碼示例來說明這個或任何更好的方法?
請幫忙。
我實施類似於這裏提到的方法,但它不能正常工作。我用代碼塊更新了我的問題 – Prasad