Question

是否可以在自定义挖空组件中使用条件逻辑？目标是根据提供给挖空组件的特定参数渲染不同的模板。

举一个非常简单的例子：

ko.components.register('network', {
    viewModel : function(params) {
        var someParam = params.someDeterminer;
    },
    template : render different template entirely (maybe loaded from external file) based on the value of someParam
}

这可能吗？

更新：

我接受的解决方案几乎有效。我发现，淘汰赛寻找模板的第一个声明。之后，您无法更新模板。稍微编辑一下他的代码就可以了。像这样：

ko.components.register('network', {
    viewModel : function(params) {
        var self = this;
        var someParam = params.someDeterminer;


        if(someParam=="somecondition")
            this.templateToLoad("someTemplate")
        else 
            this.templateToLoad("someOtherTemplateToLoad")

    },
template : '<div data-bind="template:{name: templateToLoad}"></div>'
}

Answer 1

您可以执行类似

的操作

ko.components.register('network', {
    viewModel : function(params) {
        var self = this;
        var someParam = params.someDeterminer;
        self.templateToLoad = ko.observable();

        if(someParam=="somecondition")
            self.templateToLoad("someTemplate")
        else self.templateToLoad("someOtherTemplateToLoad")

    },
    template : '<div data-bind="template:{name: templateToLoad}"></div>'
}

Answer 2

您可以拥有一个分支到不同组件的组件。它会将视图模型转发到正确的组件中。

<!-- ko if: someParam === 'templateA' -->
    <componentA params="viewModel: $component"></componentA>
<!-- /ko -->
<!-- ko if: someParam === 'templateB' -->
    <componentB params="viewModel: $component"></componentB>
<!-- /ko -->

定制淘汰组件

2 个答案: