使用Knockout.js的简单Flickr应用程序不起作用(JSBin准备的)

simple Flickr application with Knockout.js doesn't work (JSBin prepared)

本文关键字：JSBin 不起作用 应用程序 Knockout js 简单 Flickr 使用      更新时间：2023-09-26

现在我正在编写一个简单的应用程序，它从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/

谢谢你的好意。

由于依赖跟踪在computed observable中的工作方式:

当你的求值器函数运行时，KO会保存一个日志，记录你的求值器读取的任何可观察对象(或计算的可观察对象)的值。

所以你需要在中调用你的可观察对象，引用它们是不够的:

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

我建议你在Flickr对象中声明@photos为ko.observableArray，而不是在PhotoListViewModel

中

演示JSFiddle。

相关文章：