KnockoutJS - множественный выбор с использованием выбора 2, показывая только 1-й выбор - PullRequest
Новая
       17

KnockoutJS - множественный выбор с использованием выбора 2, показывая только 1-й выбор

0 голосов
/ 06 декабря 2018

Я пытаюсь использовать выбранные 2 поля множественного выбора с Knockout JS.
В окне отображается список стран, и пользователь может выбрать несколько стран.
В окне отображается правильное отображение нескольких стран, как и ожидалось.Однако наблюдаемый массив показывает только первую запись.
Мое намерение состоит в том, чтобы получить все выбранные страны, а не первую.
Сначала я подумал, что не могу использовать мультиселектор select 2 с нокаутом, однако, если я добавлю две, например, (MT, NL),наблюдаемый показывает MT, однако, если я удаляю MT, он обновляется до NL (поэтому я не думаю, что в этом проблема)

Логика ниже: 

// Class to represent a row in the dpos grid
function DpoItem(address, preferredLanguage, countries)
{
    var self = this;
    self.address = address;
    self.preferredLanguage = preferredLanguage;
    self.countries = ko.observableArray(countries);
}

// Class to represent a language
function LanguageItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}

// Class to represent a country
function CountryItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}


// Overall viewmodel for this screen, along with initial state
function DposViewModel()
{
    var self = this;

    // Populate countries
    var countriesObject = JSON.parse(countriesJSON);
    var countries = [];
    for (var cKey in countriesObject)
    {
        countries.push(new CountryItem(cKey, countriesObject[cKey]));
    }
    self.countriesList = ko.observableArray(countries);

    // Populate languages
    var languagesObject = JSON.parse(languagesJSON);
    var languages = [];
    for (var lKey in languagesObject)
    {
        languages.push(new LanguageItem(lKey, languagesObject[lKey]));
    }
    self.languagesList = ko.observableArray(languages);

    // parse JSON DTOs and put them in the viewmodel
    var dposObject = JSON.parse('[{"countries":[],"type":"dpo","address":"dpo @avis.com","preferredLanguage":"en - GB"},{"countries":["GB", "MT"],"type":"dpo","address":"dpo @avis.co.uk","preferredLanguage":"en - GB"},{"countries":["MT"],"type":"dpo","address":"dpo @avis.com.mt","preferredLanguage":"mt - MT"}]');
    var dpos = [];
    dposObject.forEach(dpo =>
    {
        dpos.push(new DpoItem(dpo.address, dpo.preferredLanguage, dpo.countries));
    });
    self.dpos = ko.observableArray(dpos);

    self.addDpo = function ()
    {
        self.dpos.push(new DpoItem("", "", ""));
    };

    self.removeDpo = function ()
    {
        self.dpos.remove(this);
    };

    self.checkDpos = function ()
    {
        for (i = 0; i < self.dpos().length; i++)
        {
            var dpo = self.dpos()[i];
            var dpoCountries = dpo.countries();
        }
    };
}

ko.applyBindings(new DposViewModel());


$(document).ready(function ()
{
    $('.js-example-basic-multiple').select2();
});



Интерфейс ниже: 

<div id="table" class="table-editable">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Preferred Language</th>
                <th>Countries</th>
                <th><span id="table-add" class="table-add glyphicon glyphicon-plus" data-bind="click: addDpo"></span></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: dpos">
            <tr>
                <td contenteditable="true" data-bind="text: $data.address"></td>
                <td>
                    <select class="js-example-basic-single" data-bind="options: $parent.languagesList,  optionsText: 'name', optionsValue: 'code', value: $data.preferredLanguage"></select>
                </td>
                <td>
                    <select class="js-example-basic-multiple" multiple="multiple" data-bind="options: $parent.countriesList,  optionsText: 'name', optionsValue: 'code', value: $data.countries"></select>
                </td>
                <td>
                    <span class="table-remove glyphicon glyphicon-remove" data-bind="click: $parent.removeDpo"></span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<button data-bind="click: checkDpos">Click me</button>


<div>
    <h1>Summary</h1>
    <div data-bind="foreach: dpos">
        <p>Address: <strong data-bind="text: address"></strong></p>
        <p>Preferred Language: <strong data-bind="text: preferredLanguage"></strong></p>
        <p>Countries: <strong data-bind="text: countries"></strong></p>
    </div>
</div>



Есть идеи, почему это происходит?

...