Первоначальный выбор раскрывающихся списков объектов с помощью KnockoutJS - PullRequest
Новая
       5

Первоначальный выбор раскрывающихся списков объектов с помощью KnockoutJS

2 голосов
/ 24 февраля 2012

У меня есть модель, которая выглядит примерно так (не фактический код, поэтому не обращайте внимания на возможные ошибки). 

model = function(option, items) {
    self = this;
    self.options = options;
    self.items = ko.mapping.fromJS(items);
}

Список options содержит объектов , который можно выбрать в раскрывающемся списке.items также содержит список объектов, где каждый объект имеет идентичный объект, подобный объекту в списке параметров.

Затем я выполняю над списком элементов и отображаю раскрывающийся список в каждой строке. Мне нужно, чтобы объект в текущих элементах из списка элементов был выбранным параметром .Когда я, однако, не устанавливаю optionValue, а только пытаюсь сопоставить весь объект, он не работает ... Однако моя наблюдаемая тогда работает нормально, и все подписывающиеся поля для всего объекта обновляются с новым выбором.Однако я получил начальный выбор для работы с optionValue и Id, как показано ниже.

<select data-bind="options: $parent.options, optionsValue:'Id', optionsText: 'Name', value: item.Id"></select>

Моя проблема сейчас в том, что обновляется только элемент, связанный с идентификатором? Мне нужно обновить все свойства текущего элемента, даже если изменяется только идентификатор.теперь, когда я что-то меняю в выпадающем списке.

Как мне это сделать?

1 Ответ

6 голосов
/ 24 февраля 2012

Итак, мое мнение таково:

  • У вас есть набор «опций».Каждый параметр имеет некоторые свойства и идентификатор:
  • . У вас есть набор «элементов», в котором каждый элемент имеет одно свойство, содержащее объект, который равен одному из объектов внутри параметров.Таким образом, каждый «элемент» имеет выбранный «параметр».

В отличие от c # и других высокоуровневых сред, в javascript отсутствует встроенная концепция равенства.Когда вы делаете что-то вроде objA == objB, он проверяет равенство reference (не верно для примитивных типов, таких как числа и строки), т.е. что две переменные фактически ссылаются на один и тот же объект.Например, в .NET класс может реализовать IEquatable<T> (и перегрузку оператора), так что objA == objB приведет к некоторому пользовательскому сравнению, которое определит, можно ли считать два разных объекта равными.

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

В вашем случае я настроил вашу модельнемного.Я предположил, что свойство опции выбора элементов называется SelectedOption . 

function model(options, items) {
    self = this;
    self.options = options;  
    self.items = ko.mapping.fromJS(items);

    // Loop over each of the items and swap out the server-side provided option object
    // with the corresponding option from the options parameter.
    ko.utils.arrayForEach(self.items(), function(item) {
        item.SelectedOption = ko.observable(
            ko.utils.arrayFirst(self.options, function(option) { return option.Id == item.SelectedOption.Id(); })
        );
    });
}

Так как вы используете ko.mapping, я предполагаю, что параметры и параметры элементов предоставляютсякак обычные объекты javascript (Ajax, inline js). 

opts = [ 
    { Id: 1, Name: "Option 1" },
    { Id: 2, Name: "Option 2" },
    { Id: 3, Name: "Option 3" }
];

var items = [
    { Id: 1, Name: "Item 1", SelectedOption: { Id: 1, Name: "Option 1" } },
    { Id: 2, Name: "Item 2", SelectedOption: { Id: 2, Name: "Option 2" } },
    { Id: 3, Name: "Item 3", SelectedOption: { Id: 3, Name: "Option 3" } }
];

var viewModel = new model(opts, items);

Поскольку параметры, содержащиеся в параметре SelectedOption каждого элемента, точно такие же, как параметры в нокауте свойства options, теперь можно сравнивать ихна равенство, и вы можете использовать его в своих привязках следующим образом: 

<div data-bind="foreach: items">
    <select data-bind="options: $parent.options, optionsText: 'Name', value: SelectedOption"></select>
</div>

Проверьте это в jsfiddle: http://jsfiddle.net/niik/HDsKC/

...