Knockout.js 使用pubsub将对象传递给其他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;

我已经使用新的淘汰版本3.2(和requirejs)创建了2个淘汰组件

第一个组件包含一个html模板,用于显示包含在我的viewmodel中的可观察数组中的对象表

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绑定是管理绑定、组件等生命周期的好方法。另请参见