1

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

谢谢你的好心。

4

1 回答 1

1

由于依赖跟踪如何在计算的 observable 中工作:

当您的评估器功能运行时,KO 会记录您的评估器读取其值的任何可观察对象(或计算的可观察对象)。

因此,您需要在计算中调用您的可观察对象,仅引用它们是不够的:

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

@photos而且我建议您将as声明ko.observableArray在对象内部而Flickr不是PhotoListViewModel

演示JSFiddle

于 2013-03-16T06:18:10.950 回答