Question

我试图自学KnockoutJs，我认为一个简单的图片库页面将是一个增加复杂性的好方法。不幸的是，我已经遇到了我似乎无法解决的问题。

我的模板如下所示：

<div>
    <img data-bind="attr: { alt: selectedImage.description, src: selectedImage.sourceUrl }">
</div>
<div data-bind="foreach: images">
    <img data-bind="attr: { alt: description, src: sourceUrl }, event: { click: onClick }">
</div>

哪个应该足够简单。然后我的脚本有一些虚拟数据：

(function ($, ko) {
    'use strict';

    function ViewModel() {
        var self = this;

        self.images = [
            new ImageViewModel(self, { description: 'some image alt', sourceUrl: '/someimage.jpg' }),
            new ImageViewModel(self, { description: 'description two', sourceUrl: '/someotherimage.jpg' })
        ];

        self.selectedImage = ko.observable(self.images[0]);

        return self;
    }

    function ImageViewModel(gallery, image) {
        var self = this;

        self.description = ko.observable(image.description);

        self.sourceUrl = ko.observable(image.sourceUrl);

        self.onClick = function (data, event) {
            gallery.selectedImage(data);
        };

        return self;
    }

    ko.applyBindings(new ViewModel());
})(jQuery, ko);

我的问题是selectedImage绑定永远不会起作用。它最初不起作用，当我点击其中一个缩略图时它不起作用。它总是呈现相同：

<div>
    <img data-bind="attr: { alt: selectedImage.description, src: selectedImage.sourceUrl }">
</div>
<div data-bind="foreach: images">
    <img src="/someimage.jpg" alt="some image alt" data-bind="attr: { alt: description, src: sourceUrl }, event: { click: onClick }">
    <img src="/someotherimage.jpg" alt="description two" data-bind="attr: { alt: description, src: sourceUrl }, event: { click: onClick }">
</div>

我确定它很简单，但是我一直在撞墙，试图找出错误的原因。控制台或其他任何东西都没有错误。 foreach绑定工作正常，但selectedImage.*绑定不适用。

我在这里缺少什么？

Answer 1

您的selectedImage变量是一个可观察的，而observables是函数。因此，您忘了在这里使用括号。 ;）

<img data-bind="attr: { alt: selectedImage.description, src: selectedImage.sourceUrl }">

应该是。

<img data-bind="attr: { alt: selectedImage().description, src: selectedImage().sourceUrl }">

或者如果你想摆脱括号使用＆＃34;用＆＃34;捆绑。 http://knockoutjs.com/documentation/with-binding.html

Knockout Attr绑定不更新

1 个答案: