Question

我使用新的淘汰赛版本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来传达来自第一个组件的所选id。这用于需要id以与服务器通信以获取所选源项的详细信息的组件。但是，对于编辑所选项目，客户端上已知所有数据，因此额外的ajax请求不应该是解决方案，因此我想要传达完整的sourceEntry对象。

这可能是使用knockout-postbox的pubsub实现吗？

下一个问题可能很简单。只需在编辑时加载组件模型。一个隐藏的部分在考虑性能时没有意义。有没有办法在运行时使用knockout动态注入组件，或者我是否需要jquery来动态添加组件。什么是最好的做法？

使用pubsub将对象传递给其他viewmodel？

0 个答案: