在 knockoutjs 中显示具有相应图像的选择列表答案

【问题标题】：Showing an selectlist with corresponding image in knockoutjs在 knockoutjs 中显示具有相应图像的选择列表
【发布时间】：2015-03-27 22:10:26
【问题描述】：

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

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

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

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

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

真诚感谢任何帮助

谢谢

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案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>

【讨论】：