在 knockoutjs 中显示带有相应图像的选择列表

Question

我希望并排显示选择列表和图像..

随着选择列表中值的变化，图像也会发生变化。

我尝试过类似的方法但不起作用..

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

需要确保的一件事是一次性加载所有图像，以便在用户更改选择列表值时不会出现延迟...

真诚感谢任何帮助

谢谢

Answer 1

如果您不是多选对象，则不应使用 'selectedOptions' 绑定处理程序。如果您要使用整个对象，也请尽量不要指定 'optionsValue' 绑定。它只会让你写很多必要的代码：看看@这个文档：http://knockoutjs.com/documentation/options-binding.html

并排看@:How to align an inline-block horizontally and vertically

这是您修改后的代码。希望对您有所帮助：

确保图片网址正确

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>

在 knockoutjs 中显示带有相应图像的选择列表

Showing an selectlist with corresponding image in knockoutjs

knockout-2.0

knockout.js