Bootstrap dropdown binding using knockoutjs

Question

Я новичок в knockoutjs, поэтому мне действительно нужен совет, как выполнить это требование. В моем jsfiddle у меня есть связь с динамическим отображением данных в модальном режиме. Я использую это для заполнения данных в раскрывающемся списке

var eventViewModel = function() { 
    var me = this, 
    eventTypes = [{ 
     cls: 'fa fa-fw fa-globe', 
     label: 'Create Public Venue', 
     text: 'Visible to anyone', 
     url: "Link-to-Public" 
    }, { 
     cls: 'fa fa-fw fa-lock', 
     label: 'Create Private Venue', 
     text: 'Visible only to people invited', 
     url: "Link-to-Private" 
    }]; 

    //ko.cleanNode($('#add-event-modal .dropdown-menu')[0]); //ongoing 
    // How to clear the dropdown value (in actual solution the values are repeating everytime the modal called) 

    me.EventForm = new viewModel(); 

    me.eventTypes = ko.observableArray(eventTypes); 
    me.change = function(type, event) { 
    alert('Changed'); 
    //Changing body content 
    //event.preventDefault(); 
    //var elem = $(".modal-body"); 
    //transitionToNewContent(elem, type.url); 
    } 
}; 

У меня есть три вопроса:

1. Я пытаюсь связать самозагрузки выпадающего меню к заголовку, но я не знаю, как это сделать он использует всплывающее окно загрузки. Выбранный элемент должен отображаться в зависимости от выбранных данных и отключить выбранное значение или добавить higlight и значок fa-check. Я пытался исследовать, но безрезультатно, я не могу понять, что вообще понимаю.
2. В моем решении валидация работает, но в jsfiddle кажется, что она не работает. Моя проблема в том, как отобразить ошибку с ошибкой начальной загрузки.

ko.validation.init({ errorElementClass: 'has-error', errorMessageClass: 'help-block', decorateInputElement: true });

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

3. И наконец, как очистить me.eventTypes watchablearray? В моем решении каждый раз, когда я вызываю модальный, выпадающие значения повторяются. (Извините, я не могу воспроизвести его до jsfiddle)

Любая помощь и/или предложения очень ценятся. Благодаря!

Answer 1

Я собираюсь (надеюсь, ...) ответить на первый и третий вопрос; второй, похоже, не проблема, если это только скрипка, которая не работает.

Вопрос 1:

Во-первых, вам необходимо дополнительное наблюдаемым в вашем ViewModel, чтобы следить за выбранным типом. Вы можете установить этот тип внутри своего метода change, который уже правильно реализован.

me.selectedType = ko.observable(eventTypes[0]); 

me.change = function(type, event) { 
    me.selectedType(type); 
}; 

Теперь мы можем привязать <button> элемент к этому selectedType, а не жестко прописывать текст и значок:

<button 
    class="btn btn-warning dropdown-toggle" 
    type="button" 
    data-toggle="dropdown" 
    data-bind="with:selectedType"> 

    <span data-bind="attr: {class: cls}"></span> 
    <!-- ko text: label --><!-- /ko --> 
    <span class="caret"></span> 

</button> 

Обратите внимание на with данных связывания, который очень похож на foreach вы» вы использовали в своем <ul>.

Теперь, если вы хотите, чтобы стиль вашего <li> S по-разному для выбранного элемента, вы можете проверить, если они выбраны так:

$parent.selectedType() === $data 

Например:

<li data-bind="style: { opacity: $parent.selectedType() === $data ? 0.5 : 1 }"> 

(Вероятно, лучше создать вычисленный наблюдаемый isSelected и добавить его к вашим объектам)

Я включил t hese изменения в вилке вашей скрипки: https://jsfiddle.net/oLm3yvLh/ (Обратите внимание, что вы все равно можете переместить что-то вокруг; Я не читал и не прикоснулся большинство частей вашего кода)

Вопрос 3:

Это своего рода трудно для меня, чтобы догадаться, что это неправильно, но вы можете очистить наблюдаемый массив в примерно двумя способами:

1. Установите его с новым, пустым массивом: myObservableArray([])
2. Удалить все элементы из набора в настоящее время массива: myObservableArray.removeAll()