单击时更改图像 src 绑定

Question

单击不同的图像后，我想更改img 的attr: { src: ...} 绑定，例如：

    $(document).ready(function () {
        var viewModel = {
            list: ko.observableArray(),
            showRenderTimes: false
        };

        ko.applyBindings(viewModel);

        window.vm = viewModel;
    });
    $.ajax({
        type: "POST",
        url: "WebService.asmx/GetList",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            var c= msg.d;
            vm.list(c);
        },
        failure: function (msg) {
            alert(msg.d);
        }
    });

有了这个 html：

<div class="Container" data-bind="foreach: list">
    <div class="MainPicture">
        <img id="mainpic" class="MainPic" src="#" data-bind="attr: { src: Picture1 }" />
    </div>
    <div class="OtherPicture">
        <img id="pic1" class="SubPic" src="#" data-bind="attr: { src: Picture2}" />
        <img id="pic2" class="SubPic" src="#" data-bind="attr: { src: Picture3 }" />
        <img id="pic3" class="SubPic" src="#" data-bind="attr: { src: Picture4 }" />
    </div>
</div>

当点击不同的图像时，我想更改src 的图片绑定。例如，如果我点击“pic1”，我希望“mainpic”获取图像src“Picture2”和“pic1”获取“Picture1”的图像src。

不用说，我点击的每个“其他图片”都需要它。

Answer 1

类似于以下内容。 JSFiddle Demo

HTML

<div class="Container">
    <!-- ko if: selectedPicture() -->
    <div class="MainPicture" data-bind='with: selectedPicture'>
        <img id="mainpic" class="MainPic" src="#" data-bind="attr: { src: imageUrl }" />
    </div>
    <!-- /ko -->
    <ul class="OtherPicture" data-bind="foreach: list">
        <li>
        <img class="SubPic" src="#" data-bind="attr: { src: imageUrl}, click: $parent.selectPicture" />
        </li>
    </ul>
</div>

JS

var Picture = function (data) {
    var self = this;
    self.id = ko.observable(data.id || 0);
    self.name = ko.observable(data.name || '');
    self.imageUrl = ko.observable(data.imageUrl || '');
    return self;
};
var ViewModel = function () {
    var self = this;
    self.selectedPicture = ko.observable(new Picture({
        id: 4,
        name: 'Picture 4',
        imageUrl: 'http://placehold.it/100x100'
    }));
    self.list = ko.observableArray([new Picture({
        id: 1,
        name: 'Picture 1',
        imageUrl: 'http://placehold.it/150x150'
    }), new Picture({
        id: 2,
        name: 'Picture 2',
        imageUrl: 'http://placehold.it/260x260'
    }), new Picture({
        id: 3,
        name: 'Picture 3',
        imageUrl: 'http://placehold.it/370x370'
    })]);

    self.selectPicture = function (item) {
        self.selectedPicture(item);
    };
    return self;
};
var vm = new ViewModel();
ko.applyBindings(vm);

window.vm = vm;