マルチページの「タイプ」を使用すると配列内のすべてのアイテムが上書きされるのに、「ベース タイプ」ツールを使用すると上書きされないのはなぜですか?
52 行目 (js の下部から 9) をコメント/コメント解除してテストします。
JavaScript :
2 つのタイプを定義します。抽象基本タイプ 'ツール' として意図され、ツール 'マルチページ' から継承する意図された具象タイプです。
「モデル」オブジェクトは、動的作成の有効な型を定義し、getNewInstance() 関数は有効な型の新しいインスタンスを返します。
ビューモデル「vmDesigner」は、作成したマルチページの監視可能な配列を保持します。
// Contsructor - Inherited
var Tool = function () {
var self = this;
//Public Fields
self.id = ko.observable().extend({
required: true
});
self.type = ko.observable();
self.xPos = ko.observable();
self.yPos = ko.observable();
self.xSize = ko.observable();
self.ySize = ko.observable();
};
var MultiPage = function () {
var self = this;
self.tools = ko.observableArray();
};
// Inherit from Tool.
MultiPage.prototype = new Tool();
$.extend(MultiPage, Tool);
function Model(tool, multipage) {
var types = {
tool: tool,
multipage: multipage
};
return types;
}
var model = new Model(Tool, MultiPage);
function getNewInstance(type, initisations) {
var _Type = model[type];
return (_Type ? new _Type().id(initisations.id) : null);
}
function vmDesigner() {
var tools = ko.observableArray();
return {
tools: tools
};
}
var vd = new vmDesigner();
var type = 'multipage';
//var type = 'tool';
var dataItem = new Tool(); //tmp data
vd.tools.push(getNewInstance(type, { id: 1, xPos: 50, yPos: 50 }));
vd.tools.push(getNewInstance(type, { id: 2, xPos: 60, yPos: 60 }));
vd.tools.push(getNewInstance(type, { id: 3, xPos: 70, yPos: 70 }));
ko.applyBindings(vd);
HTML :
マークアップはビューモデルにバインドされ、ツール配列内のすべての項目が表示されます。
<div id="view-design" data-bind="foreach: tools">
Tool:<span data-bind="text: id"></span>
<br />
</div>