Question

问题：是否可以根据模型对某个字段的值来获得不同的视图？

说明：我的模型中包含设置和类型字段。设置可以是基于类型的不同设置模型。我想根据 Type 的值来切换设置视图。

我对淘汰赛有一些小经验，并希望这可以扩展到许多不同的类型。

我尝试使用带有switch语句的ko.computedObservable来返回一个定义其中设置的函数（）;如：

self.Settings = ko.computed(function () {

    switch (self.Type()) {

        case "Type1":

            return new Type1(model.Settings);

        case "Type2":

            return new Type2(model.Settings);
    }

});

Type1和Type2是具有每种模型类型的唯一设置的函数。 这次失败了。

我可能只是让问题复杂化，所以第二双眼睛和任何建议都会很棒！

提前谢谢！

Answer 1

考虑将templates用于不同的观看次数。通过这样做，您可以使用dynamically选择基于viewmodel的属性呈现哪个模板的功能。例如，假设您的viewmodel类似于：

var vm = function() {
    var self = this;
    self.Settings = ko.computed(function () {
        switch (self.Type()) {
            case "Type1":
                return new Type1(model.Settings);

            case "Type2":
                return new Type2(model.Settings);
        }
    });

    //Based on your example computed, we'll return a different template name
    //for each object type you're returning
    self.templateName = function(t) {
        if (t instanceof Type1)
            return "template_type1";
        if (t instanceof Type2)
            return "template_type2";

        return "template_unknown";
    }
};

然后您的主视图正常绑定到您的集合，但template绑定使用您的viewmodel上定义的函数：

<div data-bind="template: { name: templateName, foreach: Settings }"></div>

然后，您可以在脚本中包含绑定到每种类型的特定属性的模板：

<script id="template_type1" type="text/html">
    <span data-bind="text: name"></span>
</script>
<script id="template_type2" type="text/html">
    <h3 data-bind="text: title"></h3>
</script>
<script id="template_unknown" type="text/html">
    <span>Unknown item type</span>
</script>

淘汰赛：基于模型领域的模块化视图

1 个答案: