Knockoutjs 和视图模型的“子类化”

Question

在其他框架的其他 MVVM API 中，例如用于 WPF 的 Caliburn Micro，您可以对视图模型进行子类化。作为一个例子，我有这个视图模型

Customer
Id : int
Selected : bool
Name : string
Edit : ViewModel

根据不同的客户类型，我将有不同的编辑视图模型，在 Caliburn micro 中，它会根据视图模型的类型自动呈现正确的视图，类型在 JS 中当然不存在，但你能以某种方式实现这一点淘汰赛？

Answer 1

感谢 Mike，您的解决方案并不完全符合我的需要，虽然我正在做类似的服务器端操作，但我们的 json-objects 是从 CQRS 读取模型存储库中读取的。

事实证明，命名模板是我所追求的。这是一个展示我所做的小小提琴（在我们的真实场景中，子模型的属性将在实际的客户对象上）

http://jsfiddle.net/Z7gMN/1/

更新： 刚刚看到这个答案得到了赞成。有更优雅的方法，例如使用我的 Convention over configuration library found here

https://github.com/AndersMalmgren/Knockout.BindingConventions

它对使用该类型的模板有一个约定，因此请使用您喜欢的 OO 模式，例如这个

http://ejohn.org/blog/simple-javascript-inheritance/

定义不同的类型，重要的是它们以 Model 或 ViewModel

为后缀

模板应具有相同的名称但后缀为View

<script type="text/html" id="MyView">
    <input data-name="myValue" />
</script>  

http://jsfiddle.net/JKXaX/5

Answer 2

我做了一些类似于我认为你想做的事情。

我所做的是在服务器上创建视图模型，将它们序列化为 json 并使用映射插件创建 Knockout 视图模型。

我有一个 C# 中的通用基类和具有各种数据结构的实现类。然后我只定义淘汰赛中的行为。

类似这样的：

public abstract MyBase : IDefineMyBase {
    public string Type { get { return this.GetType().Name; } }
}

public class MyFirstEditModel : MyBase {
    public string Something { get; set; }
}

我使用 ASP.NET MVC 来服务这个淘汰赛：

public ActionResult MyAction() {
   var model = {
       EditModels = new IDefineMyBase[] {
           new MyFirstEditModel {
               Something = "Some thing"
           },
           ... other implementations
       }
   };

   // AsJson is a serialization extension method
   return View("MyView", (object)model.AsJson()); 
}

在 Knockout 中，我是这样使用它的：

// This is a behaviour base "template" that will be applied for all editmodels
var editModel = function(data) {
    // Map the edit model specific data to *this*
    ko.mapping.fromJS(data, {}, this);

    // Apply implementation specific behaviour to this instance of the model
    eval(this.Type() + '(this)'); // example: MyFirstEditModel(this);
}

// This is specific behaviour for MyFirstEditModel
var MyFirstEditModel = function(base) {
    base.someBindableSpecificFunction = function() {
        // You can use data from the implementation here.
        alert(base.Something());
    };
}

// This is the base view model where you can have all the main functionality
var viewModel = function(base) {
    ko.utils.arrayForEach(data.EditModels(), function (editModel) {
        s.Parent = base;
        // example: base.MyFirstEditModel = editModel;
        eval('base.' + s.Type() + ' = editModel');
    });
}

// This is mapping instructions
var mapping = {
    'EditModels': {
        create: function (options) {
            return new editModel(options.data);
        }
    }
};

$(document).ready(function () {
    // Map the server side model to knockout
    var mapped = ko.mapping.fromJS(@Html.Raw(Model), mapping, vm);
    // Add behaviour to the mapped data
    viewModel(mapped);
    ko.applyBindings(vm);
});

嗯。原来是一段代码。这就是我如何在服务器和客户端之间架起桥梁，同时仍然能够根据类型名称等选择模型。它还允许我在服务器上定义数据结构，同时在剔除视图模型中定义表示特定的行为。映射插件有点神奇，但一个缺点是您在淘汰视图模型中看不到数据结构，但我接受了这一点。此外，请注意名称的大小写不同，如果您不能忍受 Newtonsofts Json 序列化程序在序列化时可以更改大小写。我选择不这样做，因为它可以帮助我查看来自服务器的内容以及我在视图模型中定义的内容。