Показывая SelectList с соответствующим изображением в knockoutjs

Question

Я хотел бы показать SelectList и бок о бок изображения ..

как значения в SelectList изменяет изображение будет меняться.

Я пытался что-то подобное, но не работает ..

<p>Locales: <select data-bind="options: locales, selectedOptions: selected, optionsCaption: 'Select your locale...', optionsText: 'country', optionsValue: 'country'"></select></p> 
<p data-bind="text: selected"></p> 
//<img data-bind="attr: {src: image, alt: country}" class="photoThumbnail"/> 

function viewModel() { 
    var self = this; 
    self.locales = [ 
    { country: 'USA', image: 'en_US.jpg' }, 
    { country: 'Spain', image: 'es_ES.jpg' }, 
    { country: 'French', image: 'fr_FR.jpg' } 
    ] 
    self.selected = ko.observable('USA'); 
} 
ko.applyBindings(new viewModel()); 

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

Любая помощь искренне оценили

Благодаря

Answer 1

Вы не должны использовать связывания обработчика «selectedOptions», если ваш, не мультиселективный. Также попробуйте не указывать привязку «optionsValue», если вы собираетесь использовать весь объект. Это только оставить бы вы писать много необходимого кода: посмотрите @ эту документацию: http://knockoutjs.com/documentation/options-binding.html

Что касается бок о бок взять взгляд @: How to align an inline-block horizontally and vertically

Вот вы изменили код. Надеюсь, что это помогает:

Убедитесь, что URL изображений правильны

function viewModel() { 
 
    var self = this; 
 
    self.locales = [{ 
 
     country: 'USA', 
 
     image: 'en_US.jpg' 
 
    }, { 
 
     country: 'Spain', 
 
     image: 'es_ES.jpg' 
 
    }, { 
 
     country: 'French', 
 
     image: 'fr_FR.jpg' 
 
    }] 
 
    self.selected = ko.observable('USA'); 
 
} 
 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<p>Locales: 
 
    <select data-bind="options: locales, value: selected, optionsCaption: 'Select your locale...', optionsText: 'country'"></select> 
 
</p> 
 
<div data-bind="with: selected"> 
 
    <p data-bind="text: country"></p>// 
 
    <span>Images should point to the correct url or use a base64 string</span> 
 
<img data-bind="attr: {src: image, alt: image}" class="photoThumbnail" /> 
 
</div>