Question

现在我正在编写一个简单的应用程序，它可以从Flickr获取五张照片，并将标题显示为列表。起初我尝试@current_photos这很好，但是当我使用Knockout.js（@currentPhotos）时，这不起作用。

root = exports ? this
class root.Flickr
  constructor: ->
    @photos = []
    $.getJSON(
      'http://www.flickr.com/services/rest/?jsoncallback=?'
        format : 'json'
        method : 'flickr.photos.search'
        api_key : '7965a8bc5a2a88908e8321f3f56c80ea'
        user_id : '29242822@N00'
        per_page : 5
    ).done((data) =>
      $.each data.photos.photo, (i, item) =>
        @photos.push item
    )

root = exports ? this
class root.PhotoListViewModel
  index = null
  currentPhotos = []
  constructor: ->
    flickr = new Flickr
    # @current_photos = flickr.photos ###### WORKS GOOD
    flickr.photos = ko.observableArray []
    @currentPhotos = ko.computed ->
      flickr.photos

HTML如下：

<body>

<h4>Photo List</h4>
<ul data-bind="foreach: currentPhotos">
    <li>
      title: <span data-bind="text: title"> </span>
    </li>
</ul>

</body>

我创建了JSBin页面如下： http://jsbin.com/avazak/7/

谢谢你的善意。

Answer 1

由于dependency tracking在计算的observable中的工作原理：

当您的求值程序函数正在运行时，KO会记录您的求值程序读取值的任何可观察对象（或计算的可观察对象）。

所以你需要调用你的observables在计算中它是不够的引用它们：

@currentPhotos = ko.computed ->
    flickr.photos()

我建议您将@photos ko.observableArray声明为Flickr对象，而不是PhotoListViewModel

演示JSFiddle。

使用Knockout.js的简单Flickr应用程序不起作用（JSBin准备好了）

1 个答案: