0

我正在将 require.js 与主干和主干.localstorage 一起使用，我试图弄清楚如何在调用 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();

Songs 是一个集合，在集合文件中看起来像这样，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>
  <% }); %>
4

1 回答 1

0

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

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 存储集合和模型的方式 -->此处
参见底部的表格，链块的键是您的本地存储名称，然后每个模型都有一个唯一的键。

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

或者，您可以从服务器获取（推荐），这将填充您的集合。或者您可以在页面加载时引导数据并以这种方式重置您的集合。

于 2013-10-19T07:30:07.093 回答