淘汰赛 Attr 绑定未更新答案

【问题标题】：Knockout Attr Binding Not Updating淘汰赛 Attr 绑定未更新
【发布时间】：2016-02-04 01:08:41
【问题描述】：

我正在尝试自学 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.* 绑定不行。

我在这里错过了什么？

【问题讨论】：

标签： knockout.js

【解决方案1】：

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

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

应该是的。

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

或者，如果您想去掉括号，请使用“with”绑定。 http://knockoutjs.com/documentation/with-binding.html

【讨论】：

我知道这很简单。谢谢。
with 绑定很漂亮。我还没有通过文档中的foreach :)
没问题。当您不确定 observable 是否有值时，它会派上用场。