1
我繼續學習挖空並繼續面對奇怪的問題我不知道如何克服。在循環中敲除嵌套綁定
我有以下的HTML頁面和JS腳本：
HTML：
<div data-bind="debug: $data, foreach: objects">
<span hidden="hidden" data-bind="value: type.id"></span>
<input type="text" data-bind="value: type.title" />
<button type="button" data-bind="click: $parent.removeObject">- </button>
</div>
<div class="control-group form-inline">
<select data-bind="options: availableTypes, optionsValue: function(item) {return item;},
optionsText: function(item) {return item.title;}, value: itemToAdd.type,
optionsCaption: 'Select types...'"></select>
<button type="button" data-bind="click: addObject">+</button>
</div>
</div>
JS：
function model() {
var self = this;
var types = [new Type("1"), new Type("2"), new Type("3")];
var objects = [new Object("1")];
self.objects = ko.observableArray(objects);
self.usedTypes = ko.computed(function() {
return types.filter(function(type) {
for (var j = 0; j < self.objects().length; j++) {
if (self.objects()[j].type.id === type.id) {
return true;
}
}
return false;
});
}, self);
self.availableTypes = ko.computed(function() {
return types.filter(function(type) {
for (var j = 0; j < self.usedTypes().length; j++) {
if (self.usedTypes()[j].id === type.id) {
return false;
}
}
return true;
});
}, self);
self.itemToAdd = new Object();
self.addObject = function() {
self.objects.push(self.itemToAdd);
self.itemToAdd = new Object();
};
self.removeObject = function(object) {
self.objects.remove(object);
};
};
function Object(type) {
var self = this;
self.type = new Type(type);
}
function Type(id) {
var self = this;
self.id = id;
self.title = id;
}
ko.applyBindings(new model());
我簡化模型來顯示錯誤。事情是，淘汰賽聲稱這是非法的呼籲做到這一點：
<span hidden="hidden" data-bind="value: type.id"></span>
因爲它不能在上下文中找到屬性id。據我所知，它在那裏，一切都好。
請問有人能指出我的錯誤嗎？
p.s.這裏是一個JsFiddle
加成
感謝@ Daryl的幫助下，我才得以本地化問題。如果我更換
self.itemToAdd = new Object();
self.addObject = function() {
self.objects.push(self.itemToAdd);
self.itemToAdd = new Object();
};
有：
self.itemToAdd = new Object();
self.addObject = function() {
self.objects.push(new Object(1));
self.itemToAdd = new Object();
};
不過，下面的代碼仍然不工作：
self.itemToAdd = new Object("1");
self.addObject = function() {
self.objects.push(self.itemToAdd);
self.itemToAdd = new Object();
};
看來itemToAdd對象從它綁定到HTML元素誤填。但我仍然不知道究竟是什麼錯誤。
從你的小提琴判斷，它似乎正在加載一切正常 - 它只是當你試圖添加一個新的對象，它抱怨。我的猜測是，這是由於你的addObject方法的工作原理。你可以看到它推着self.itemToAdd，它總是被初始化爲一個空的Object，因爲你沒有傳入類型參數。由於你沒有傳入類型參數，所以你的Type對象的屬性被初始化爲一個初始值未定義的值。嘗試傳遞一個「1」「2」或「3」到你的對象構造函數，看看它的行爲如何你所期望的。 – Daryl
@Daryl，謝謝你的回覆。我試圖做你的建議，但結果很奇怪，他們不幫我解決這個問題。我會相應地更新這篇文章。 –