javascript - Knockout JS 使用 javascript 类型从服务器数据初始化可观察数组

Question

我正在寻找从某些服务器数据 (ViewBag) 初始化一个可观察数组的最佳方法，我希望数组内容是我定义的 javascript 类型。没有 JS 类型的要求，我可以使用:

materialVarieties: ko.observableArray(@Html.Raw(Json.Encode(ViewBag.Materials)))

但我也有一个我想使用的 Material JS 类型，所以我可以有一些额外的特定于 ViewModel 的属性和函数，即:

var material = function(id, name) {
    this.id = id;
    this.name = name;
    this.selected = ko.observable(false);

    this.select = function()
     {
        jQuery.each(processViewModel.materials(), function(index, item)
        {
            item.selected(false);
        });
        this.selected(true);
      }
}

然后所需的初始化变为:

materialVarieties: ko.observableArray([new material(1, "Apricot"), .....

目前我从 ViewBag 数据构建一个字符串，然后将其呈现为初始化程序，如下所示:

@{ var items = string.Join(",",
                ((IEnumerable<MaterialVariety>) ViewBag.Materials)
                            .Select(m => string.Format("new material({0}, {1})",
                                      Json.Encode(m.Id), Json.Encode(m.Name)))); }

var processViewModel = {
    material: ko.observableArray([@Html.Raw(items)])

但我想知道是否有比 string.Join 位更简洁的方法。我可以将它包装在一个 Helper 中。你是做什么的？

Answer 1

我通常会先序列化数组，然后在将它放入 View 模型时映射它。会像:

var originalVarieties = @Html.Raw(Json.Encode(ViewBag.Materials))

var processViewModel = {
   materialVarieties: ko.observableArray(ko.utils.arrayMap(originalVarieties, function(variety) {
      return new material(variety.id, variety.name);
   }))
}

需要在客户端进行少量额外处理，但看起来比构建字符串更干净。