Knockout：基于模型字段的模块化视图

Question

问题：是否可以根据模型对字段的值对模型进行不同的视图？

说明： 我有一个模型，其中包含 Settings 和 Type 字段。设置可以是基于类型的不同设置模型。我想根据 Type.

的值切换设置视图

我在敲除方面经验不足，希望它可以扩展到许多不同的类型。

我尝试使用带有 switch 语句的 ko.computedObservable 到 return 定义其中设置的 function()；如：

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 for your different views. By doing so, you can then make use of the ability to dynamically 选择根据视图模型的属性呈现的模板。例如，假设您的视图模型类似于：

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 绑定会使用在您的视图模型上定义的函数：

<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>

Knockout：基于模型字段的模块化视图

Knockout: Modular Views Based On Model Field

knockout.js