Knockout JS инициализирует наблюдаемый массив из данных сервера, используя тип javascript - PullRequest
8 голосов
/ 13 августа 2011

Я ищу лучший способ инициализации наблюдаемого массива нокаута из некоторых данных сервера (ViewBag), и я хочу, чтобы содержимое массива соответствовало определенному типу javascript. Без требования типа JS я мог бы просто использовать:

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

но у меня также есть тип материала 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. Я мог бы обернуть это в Помощника. Что ты делаешь?

1 Ответ

15 голосов
/ 13 августа 2011

Обычно я сначала сериализирую массив, а затем отображаю его при помещении его в модель представления. Было бы похоже:

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);
   }))
}

Требует небольшого количества дополнительной обработки на стороне клиента, но кажется чище, чем построение строк.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...