Knockout.js - 设置/更改 observable 后 UI 未更新答案

【问题标题】：Knockout.js - UI not updated after observable has been set / changedKnockout.js - 设置/更改 observable 后 UI 未更新
【发布时间】：2017-04-16 02:27:57
【问题描述】：

我有一个列表，显示照片拇指单击拇指时，会打开一个引导模式，将单击的拇指显示为全屏图像。这是通过更新 observable() 来完成的。

问题是.. UI 没有更新，导致没有数据显示，没有图像或文本。模态弹出功能正常工作。

但是.. console.logging observable 时。它按应有的方式显示对象，并进行更新。

那么为什么当我在控制台记录它而不是在 UI 中时这看起来很好？

点击事件（在 foreach 内）

<a data-toggle="modal" data-target="#full-modal-photopage" data-bind="click: $parent.setSelectedPhoto">
    <img data-bind="attr:{src: BlobUrlPhotoThumb}" style="max-width: 100%; max-height: 100%;" />
</a>

显示所选照片的模式（引导模式）

<div class="modal fade" id="full-modal-photopage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 999999999999">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 id="myModalLabel" data-bind="text: selectedPhoto.PhotoText "></h4>
                  </div>
                  <div class="modal-body">
                    <img data-bind="attr: { src: selectedPhoto.BlobUrlPhoto }" id="full-modal-img" alt="" />
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>

Observable init & setSelectedPhoto 脚本

self.selectedPhoto = ko.observable();

    self.setSelectedPhoto = function(selPhoto) {
        self.selectedPhoto(selPhoto);
        console.log(self.selectedPhoto());
    }

console.log 截图

【问题讨论】：

让self.selectedPhoto observables 中的所有属性怎么样？因为，似乎主对象被引用了，但实际上 bound 属性没有更新，因为它们不是可观察的......

标签： javascript twitter-bootstrap knockout.js

【解决方案1】：

由于您的selectedPhoto 是可观察的，因此您必须在访问可观察的属性之前添加括号：

<h4 id="myModalLabel" data-bind="text: selectedPhoto().PhotoText "></h4>
...
<img data-bind="attr: { src: selectedPhoto().BlobUrlPhoto }" id="full-modal-img" alt="" />

更新：

您可能更喜欢的另一种方式是使用with 绑定，它将绑定上下文设置为给定变量（普通变量或可观察变量）。所以将它添加到#full-modal-photopage：

 <div class="modal fade" id="full-modal-photopage" data-bind="with: selectedPhoto" ...

并在不指定 selectedPhoto 的情况下访问属性：

<h4 id="myModalLabel" data-bind="text: PhotoText "></h4>
...
<img data-bind="attr: { src: BlobUrlPhoto }" id="full-modal-img" alt="" />

【讨论】：

顺便说一句，这可以通过在容器元素上使用with: selectedPhoto 绑定来简化。
@Tomalak，是的，当您发表评论时，我一直在更新我的答案。谢谢。
哇，伙计们！..我不得不说这个很棒的合作:) 真的，真的很高兴这个例子..它解决了所有问题，让我很好地理解了这是如何连接的使用 observables 并访问它们..

【解决方案2】：

Observables 是函数。您可以直接将它们用作淘汰赛中的事件处理程序，额外的setSelectedPhoto() 方法是多余的：

<a data-bind="click: $parent.selectedPhoto" data-toggle="modal" data-target="#full-modal-photopage">
    <img data-bind="attr:{ src: BlobUrlPhotoThumb}" style="max-width: 100%; max-height: 100%;" />
</a>

现在selectedPhoto 将在点击时更新。

在您的模式中，您可以使用with: selectedPhoto a) 在selectedPhoto 更改时重建内部部分，b) 为您所指的属性设置上下文：

<div class="modal fade" id="full-modal-photopage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 999999999999">
  <div class="modal-dialog">
    <div class="modal-content" data-bind="with: selectedPhoto">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" data-bind="text: PhotoText"></h4>
      </div>
      <div class="modal-body">
        <img data-bind="attr: { src: BlobUrlPhoto }" id="full-modal-img" alt="" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

通过这种设置，BlobUrlPhoto 或 PhotoText 本身是否是可观察的无关紧要。 with 绑定做了正确的事情。

【讨论】：