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

Question

我有一个列表，显示照片拇指当点击一个拇指时，会打开一个引导模式，将点击的拇指显示为全屏图像。 这是通过更新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>

可观察的init和setSelectedPhoto脚本

self.selectedPhoto = ko.observable();

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

console.log的屏幕截图

Answer 1

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

<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="" />

Answer 2

可观察性是功能。 您可以直接将它们用作knockout中的事件处理程序，额外的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本身是否可观察PhotoText 。 with约束力做正确的事情。