Knockout.js - 在设置/更改observable后，UI未更新

Question

我有一个列表，显示照片拇指当点击一个拇指时，会打开一个自举模式，将点击的拇指显示为全屏图像。 这是通过更新observable（）来完成的。

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

BUT .. 当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>

显示所选照片的​​模式（bootstrap模式）

<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>

可观察的初始＆amp; setSelectedPhoto脚本

self.selectedPhoto = ko.observable();

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

console.log的屏幕截图

Answer 1

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

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

<强>更新

您可能更喜欢的另一种方法是使用with绑定将绑定上下文设置为给定变量（plain或observable）。所以将它添加到＃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="" />

Answer 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绑定做正确的事。