集合中的主干模型数据未保存到本地存储

Backbone model data in collection not getting saved to localstorage

本文关键字：保存 存储 数据 模型 集合      更新时间：2023-09-26

我制作了一个玩具应用程序，将比赛时间存储到通过HTML输入文本字段输入的localStorage中。 当我单击"添加种族"（基本保存）来存储新种族的信息时，首次创建集合时实例化的模型数据似乎被新的种族信息所取代。 这就像 collection.fetch（） 调用正在销毁任何现有的集合数据。 我只想将比赛模型数据添加到现有的模型集合中。 我做错了什么？

应用.js 

 // js/app.js
  var app = app || {};
  var r_obj_arr=[new app.RaceModel({race_name:'Race1', race_date: new Date('November 25, 2013'), race_time: '1:00:01', race_distance: '10K'}), new app.RaceModel({race_name:'Race2', race_date: new Date('November 28, 2013'), race_time: '2:00:01', race_distance: '15K'})];

  // Create our global collection of **Races**.
  app.Races = new RaceList(r_obj_arr);

  $(function() {

    // Kick things off by creating the **App**.
    new app.RaceView({model: r_obj_arr[0], collection: app.Races});

  });

种族模型.js

// Race Model
// ----------
// Our basic **Race** model with default attributes
var app = app || {};
app.RaceModel = Backbone.Model.extend({
  initialize: function(attributes) {
    this.race_name = attributes.race_name;
    this.race_date = attributes.race_date;
    this.race_time = attributes.race_time;
    this.race_distance = attributes.race_distance;
  },
  // Default attributes ensure that each todo created has `title` and `completed` keys.
  defaults: {
    race_name: 'default race name',
    race_date: new Date("October 25, 2013"),
    race_time: '1:06:25',
    race_distance: '5K'
  }
});

种族.js

var app = app || {};

  // Race Collection
  // ---------------

  // The collection of Races is backed by *localStorage* instead of a remote
  // server.
  var RaceList = Backbone.Collection.extend({
    initialize: function() {
    },
    // Reference to this collection's model.
    model: app.RaceModel,

    // Save all of the race items under the `"races-backbone"` namespace.
    localStorage: new Backbone.LocalStorage('races-backbone'),

  });

  // Create our global collection of **Races**.
  app.Races = new RaceList();

赛马观.js

var app = app || {};
app.RaceView = Backbone.View.extend({
  // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: '#race-display',

    model: app.RaceModel,

    collection: app.Races,

    // Our template for the line of statistics at the bottom of the app.
    raceTemplate: _.template( $('#racetemplate').html() ),
    // Delegated events for displaying new questions, and clearing existing ones
    events: {
      'click #add_id': 'addRace'
    },
    // The RaceView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a **Question** and a **RaceView** in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
        // http://stackoverflow.com/questions/6079055/why-do-bindall-in-backbone-js-views
        _.bindAll(this, 'render','addRace');
        this.collection.bind('add', this.render);
        this.collection.bind('reset', this.render);
        this.render();
    },

    render: function(){
        //_.extend is an underscore.js method to combine multiple JSON objects into one
        this.$el.html(this.raceTemplate(_.extend({},this.model.toJSON(),{collection_obj: this.collection})));
        return this;
    },

    addRace: function() {
        var racename = this.$('#race-name-'+this.collection.length).val();
        var racedate = new Date(this.$('#race-date-'+this.collection.length).val());
        var racetime = this.$('#race-time-'+this.collection.length).val();
        var racemodel = new app.RaceModel({race_name: racename, race_date: racedate, race_time: racetime});
        this.collection.add(racemodel);
        racemodel.save(); 
        this.collection.fetch();  //refresh from localStorage
        alert("Running data added to collection...");
    }
});

索引.html

<body>
//: some other stuff
 <div class="container">
      <div class="row">
        <h1>Running Times</h1>

        <div id="race-display">

        </div>
      <script type="text/template" id="racetemplate">
        <input type="button" id="add_id" value="Add Race" />
        <% for(var i=0; i<this.collection.models.length; i++) { %>
          <div class="col-md-3">
          <input id="race-name-<%= i %>" placeholder="Name of race?" type="text" value="<%= this.collection.models[i].get('race_name')%>" />
          <input id="race-date-<%= i %>" placeholder="Date of race?" type="text" value="<%= this.collection.models[i].get('race_date')%>" />
          <input id="race-time-<%= i %>" placeholder="Time to finish race?" type="text" value="<%= this.collection.models[i].get('race_time')%>" />
          </div>
        <% } %>
         <div class="col-md-3">
            <input id="race-name-<%= this.collection.models.length %>" placeholder="Name of race?" type="text" />
            <input id="race-date-<%= this.collection.models.length %>" placeholder="Date of race?" type="text" />
            <input id="race-time-<%= this.collection.models.length %>" placeholder="Time to finish race?" type="text" />
          </div>

      </script>
      </div> <!-- row -->


    </div> <!-- /container -->
    <script src="js/libs/jquery/jquery-min.js"></script>
    <script src="js/libs/underscore/underscore-min.js"></script>
    <script src="js/libs/backbone/backbone-min.js"></script>
    <script src="js/libs/backbone/backbone.localStorage.js"></script>
    <!-- <script src="js/libs/backbone/localStorage.js"></script> -->
    <!-- <script src="js/libs/backbone/backbone-optamd3-min.js"></script> -->
    <script src="js/models/racemodel.js"></script>
    <script src="js/collections/races.js"></script>
    <script src="js/views/raceview.js"></script>
    <script src="js/app.js"></script>
  </body>

在您的比赛视图中，您需要更改 addRace 函数以创建新的比赛模型。您只需不断更改相同的模型，而不是创建一个新模型。

你应该有一些这样的代码：

addRace: function() {
  var race = new racemodel({
    // code for model details
  });
  this.collection.add(race);
}
相关文章：