javascript - Backbone.js - 必须指定 "url"属性或函数

我阅读了这里关于这个论点的所有主题，但我不明白这段代码是什么，我试图了解它几个小时:

当我从 TranslationView 中保存和删除事件时，它会显示“未捕获的错误:必须指定“url”属性或函数”。
我试图找出其他代码，但即使将 url 属性显式添加到集合中也不起作用......提前谢谢

  /**
 * Translation Collection - The document
 * -- Collection of all translations in a document
 */
var Document = Backbone.Collection.extend({
        model: Translation,
        localStorage: new Backbone.LocalStorage("translations-db")
    });
var Docs = new Document;

/**
 * Translation View
 * -- A single language version
 * This is a version of translation
 */

var TranslationView = Backbone.View.extend({
    template: _.template('<div class="cnt-translation"><span class="delete-btn">delete</span><span class="save-btn">save</span> Language: <input value="english" /><textarea id="translation_0" class="translation"></textarea></div>'),

    events: {
      'click span.delete-btn': 'remove',
      'click span.save-btn': 'save'
    },
      //'chnage ul#main-menu #add': 'addText'

    initialize: function(){
      _.bindAll(this, 'render', 'unrender', 'remove','save');
      this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function(counter){
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },

    unrender: function(){
      $(this.el).remove();
    },

    remove: function(){
      console.log(this.model);
      this.model.destroy();
    },

    save: function(){
      console.log(this.model);
      this.model.save();
      console.log(localStorage);

    }

});


/**
* Translation Main View
* -- The Application
* This is the top level piece of the app
*/

var AppView = Backbone.View.extend({
    el: $('#application'),
    type: 'localStorage', // in future also "remoteStorage"

    events: {
      'click #add_trans': 'createOnEnter',
      'click #save_trans': 'saveTranslations',
      'click #remove_trans': 'removeTranslation'
    },

    initialize: function(){
      _.bindAll(this,
        'render',
        'saveTranslations',
        'addTranslation'
      );
      this.listenTo(Docs, 'add', this.addTranslation);
      this.listenTo(Docs, 'all', this.render);
      this.listenTo(Docs, 'reset', this.reloadAll);
      this.render();
      console.log('initialized and texts loaded');
      Docs.fetch();
    },
    ....

    render: function(){
      var self = this;
      /*
      _(this.collection.models).each(function(translation){
        self.appendTranslation(translation);
      }, this);
      */
    }

    addTranslation: function(){
      console.log('addTrans called');
      var translation = new Translation();
      translation.set({
        id: 'translation_' + Docs.length,
        language: 'english' // modify item defaults
      });
      var translationView = new TranslationView({ model: translation });
      $(this.el).append(translationView.render().el);
      console.log(Docs);
    },

    createOnEnter: function(e) {
      Docs.create({title: 'new trans'});
    }


});


var ENTER_KEY = 13;
var app = new AppView();
console.log(app);
})(jQuery);

最佳答案

您的问题是您尝试保存/销毁从未与本地存储支持的集合关联的模型对象。

本地存储插件首先查找模型上的 localStorage 属性，如果没有找到，则在模型的集合中查找 localStorage 如果仍然没有 localStorage 发现它回退到需要 Backbone.Sync 的默认 url behaior，因此您会得到异常。

您有一个无辅助模型对象，因为您在 addTranslation 中创建了一个:

var translationView = new TranslationView({ model: translation });

但是您不需要这样做，因为当一个项目添加到您的集合中并且您将新添加的项目作为参数时会调用此方法。

您只需要使用参数 translation 更改您的方法，而不是创建一个新方法。

addTranslation: function(translation){
    translation.set({
        id: 'translation_' + Docs.length,
        language: 'english' // modify item defaults
    });

    var translationView = new TranslationView({ model: translation });

    $(this.el).append(translationView.render().el);
},

关于javascript - Backbone.js - 必须指定 "url"属性或函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17726680/