Question

我正在使用带有主干和backbone.localstorage的require.js，我试图弄清楚如何在调用fetch后使用数据，不知道如何去做...我试图传递数据在我看来并利用它。

以下是存储在localstorage中的数据示例：

[{"artist":"Hits 1 Entertainment 4-1-1","title":"Hear Katy's Perry's New Album!"}, ...]

所以它是数组中的对象。

这是我的骨干代码...

var songz = new Songs();
songz.localStorage = new Backbone.LocalStorage("music");
songz.fetch({dataType: 'json'});
var songV = new SongV({collection: songz});
songV.render();

歌曲是一个集合，在集合文件中看起来像这样，SongV是每首歌曲的视图。

以下是包含上述代码的视图：

define([
  'jquery',
  'underscore',
  'backbone',
  'models/song',
  'collections/songs',
  'views/song',
  'text!templates/page.html'

], function($, _, Backbone, Song, Songs, SongV, PageT){ 

  var Page = Backbone.View.extend({

    el: $("#page"),
    render: function () { 
      this.$el.html( PageT );

      var songz = new Songs();
      songz.localStorage = new Backbone.LocalStorage("music");
      songz.fetch({dataType: 'json'});
      var songV = new SongV({collection: songz});
      songV.render();



    }


  });
    return Page;
});

这是集合文件：

define([
  'jquery',
  'underscore',
  'backbone',
  'models/song',
], function($, _, Backbone, Song){

    var Songs = Backbone.Collection.extend({
        model: Song,

    initialize: function () {
    }
    });
  return Songs;
});

这是模型文件：

define([
  'underscore',
  'backbone'
], function(_, Backbone) {

  var Song = Backbone.Model.extend({

  });
  return Song;
});

这是模板文件：

<tr>
    <th> Number </th>
    <th> Title </th>
    <th> Artist </th>
    <th> Date_Added </th>
    <th> Video </th>
</tr>
  <% _.each(songs, function(song){ %>
  <tr>
    <td> <%= song.get("number") %> </td>
    <td> <%= song.get("title") %> </td>
    <td> <%= song.get("artist") %> </td>
    <td> <%= song.get("added_on") %> </td>
    <td> <%= song.get("video") %> </td>
  </tr>
  <% }); %>

Answer 1

您需要获取然后绑定到集合上的重置事件，以查看它何时从服务器成功提取数据。

Page = Backbone.View.extend
 el: $('#page')
 render: ->
  songz = new Songs()
  # Initialize view
  songV = new SongV({collection: songz})
  # Render view
  songV.render()
  # Fetch collection
  songz.fetch()

SongV = Backbone.View.extend
  initialize: ->
    @listenTo @collection, "reset", @onReset
  onReset: (collection) ->
    # Use populated collection data
    ...

Songs = Backbone.Collection.extend
  model: Song
  localStorage: new Backbone.LocalStorage("music")
  initialize: ->

这是Backbone.LocalStorage存储集合和模型的方式 - ＆gt; here
请参见底部的表格，链块的关键是您的本地存储名称，然后每个模型都有一个唯一的密钥。

因此，这意味着如果您将数据放在自己放置的本地存储中，则应使用跨浏览器的本地存储设备（如store.js）将其取出，然后使用它来填充Backbone.Collection

或者，您可以从服务器获取（推荐）并填充您的收藏。或者您可以bootstrap加载页面上的数据并以这种方式重置您的收藏。

如何在调用fetch时使用数据？

1 个答案: