Knockout.js 使用pubsub将对象传递给其他viewmodel?
我已经使用新的淘汰版本3.2(和requirejs)创建了2个淘汰组件 第一个组件包含一个html模板,用于显示包含在我的viewmodel中的可观察数组中的对象表Knockout.js 使用pubsub将对象传递给其他viewmodel?,knockout.js,knockout-components,knockout-postbox,Knockout.js,Knockout Components,Knockout Postbox,我已经使用新的淘汰版本3.2(和requirejs)创建了2个淘汰组件 第一个组件包含一个html模板,用于显示包含在我的viewmodel中的可观察数组中的对象表 define(["knockout", "text!./source-table.html", "knockoutpostbox"], function (ko, sourceTemplate) { function sourceViewModel() { var self = this;
define(["knockout", "text!./source-table.html", "knockoutpostbox"], function (ko, sourceTemplate) {
function sourceViewModel() {
var self = this;
this.sourceEntries = ko.observableArray();
this.selectedSourceEntry = ko.observable().publishOn("selectedSourceEntry");
$.getJSON('./api/SourceFile').success(function (data, status, xhr) {
console.log(data);
var loadedSourceEntries= [];
$.each(data, function (index, item) {
loadedSourceEntries.push(new sourceEntry(item.ID, item.Order, item.SourceLocation, item.SourceFilename, item.Description, item.Contact, item.PostCommand, item.IsActive, item.Overwrite));
console.log(item);
});
self.sourceEntries(loadedSourceEntries);
});
self.selectSourceEntry = function (data) {
console.log(data);
self.selectedSourceEntry(data.id);
}
};
function sourceEntry(id, order, sourceLocation, sourceFilename, description, contact, postCommand, isActive, overwrite) {
var self = this;
self.id = id;
...
}
return { viewModel: sourceViewModel, template: sourceTemplate };
});
第二个组件包含一个html模板,用于显示用于编辑第一个组件中选定项的值的模式
define(["knockout", "text!./destination-table.html", "knockoutpostbox"], function (ko, destinationTemplate) {
function destinationViewModel() {
var self = this;
this.destinationEntries = ko.observableArray();
this.selectedDestinationEnty = ko.observable();
this.sourceEntry = ko.observable()
.subscribeTo("selectedSourceEntry", function (newValue) {
$.getJSON('./api/Destinations/' + newValue).success(function (data, status, xhr) {
var loadedDestinationEntries = [];
$.each(data, function (index, item) {
loadedDestinationEntries.push(new destinationEntry(item.ID, item.SourceID, item.DestinationLocation, item.DestinationFilename));
console.log(item);
});
self.destinationEntries(loadedDestinationEntries);
});
});
};
function destinationEntry(id, sourceId, destinationLocation, destinationFilename) {
var self = this;
self.id = id;
self.sourceID = sourceId;
self.destinationLocation = destinationLocation;
self.destinationFilename = destinationFilename;
}
return { viewModel: destinationViewModel, template: destinationTemplate };
});
如您所见,我已经使用pubsub从de-first组件传递所选id。这用于组件,这些组件需要id才能与服务器通信以获取所选源项的详细信息。但是,对于编辑所选项目,客户机上的所有数据都是已知的,因此额外的ajax请求不应该是解决方案,因此我希望与完整的sourceEntry对象通信
使用敲除邮箱的pubsub实现是否可能
下一个问题可能很简单。编辑时只需加载组件的模型。考虑到性能,隐藏部分没有意义。有没有一种方法可以在运行时使用knockout动态注入组件,或者我需要jquery来动态添加组件。这里的最佳实践是什么?希望回答您的最后一个问题:如果使用if/with绑定,则在您的条件解析为true之前,所有底层dom节点都不会插入到dom中(稍后当条件解析为false时,它们将被删除)。因此,如果这些底层dom节点包含您的组件,则在开始编辑之前不应加载该组件。这与可视绑定不同,可视绑定将立即插入DOM节点,从而也立即加载组件。With/if绑定是管理绑定、组件等生命周期的好方法。另请参见