【问题标题】:Saving Entries to Database Relationship (many-to-many) Table from a Backbone Project从主干项目将条目保存到数据库关系(多对多)表
【发布时间】:2012-06-21 02:40:50
【问题描述】:

我目前有两个 Backbone 模型:用户和项目。我想要一个 Backbone 视图,其中包含一个可以创建新项目的表单,以及当前现有用户(数据库用户表中的条目)与该项目的关联。当用户完成此表单并单击保存按钮时,应将新项目保存到数据库中(在项目表中),并将保存的项目与相关用户之间的关系保存到关系表中(projects_users 表,包含每个关系对应的项目 ID 和用户 ID)。目前,我可以保存项目信息,但无法使用 Backbone-relational 将任何数据放入 projects_users 表中。

您认为实现上述功能的最佳方法是什么?如果您能指出我可以用作模板的特定代码,那就太好了。

谢谢你, 亚历山德拉

【问题讨论】:

  • @Alendandra 我通常遵循这个。 项目模型有一个属性 Resources,它是一个集合,其中包含用户模型列表再次阅读,直到你明白了。集合有 URL,Project 也是一个有 URL 的模型。因此,在创建用户时,您将使用用户详细信息进行发布(确保用户的属性中有项目 ID)。在服务器端,只需将 userid、projectid 插入表格即可享受

标签: backbone.js relationship backbone-relational


【解决方案1】:

经过一段令人沮丧的试错期后,我终于设法让我的代码工作了!它不漂亮,但它很实用,现在我可以开始考虑改进它了。希望其他人会发现这些信息有用...

让我走上正轨的一件事是了解需要更改的不仅是主干视图代码(具有新项目形式的代码),还包括相应的 Rails 模型。

对于 rails 部分(Rails 3.2.2),我确保以下模型文件具有必要的信息:

project.rb

class Project < ActiveRecord::Base
  has_and_belongs_to_many :users

  #attr_accessible :name, :description, :users_attributes
  #has_many :projects_users, foreign_key: "project_id", dependent: :destroy
  #has_many :users, through :projects_users
  #accepts_nested_attributes_for :users
end

user.rb

class User < ActiveRecord::Base
  has_and_belongs_to_many :projects
end

projects_users.rb

class ProjectsUsers < ActiveRecord::Base
    belongs_to :project
    belongs_to :user
end

我在许多不同的地方读到 has_and_belongs_to_many 并不是在 Rails 中设置多对多关系的最佳方式。尽管如此,我无法使用 has_many 定义获得相同的功能 - project.rb 中的注释部分是我尝试这种不同方法的方式。文件 user.rb 有一些相应的代码,为简单起见,我将其删除。

现在,我需要在主干表单视图中完成的是发送一个带有 Rails projects_controller.rb 可以识别的 JSON 对象的 POST 请求。最初,我尝试了几个 POST 请求但没有成功(也没有错误来指导我)。但后来,我记得之前为团队实现了一个表单,用户可以在其中添加到特定团队(HABTM 复选框 - 此功能有 a railscast)。看了这个例子之后,我意识到我的 POST 请求需要什么。这是我想在 Rails 服务器日志文件中看到的内容:

Started POST "/projects" for 127.0.0.1 at 2012-06-27 00:35:22 +0000
Processing by ProjectsController#create as JSON
  Parameters: {"project"=>{"description"=>"with some description", "user_ids"=>["101", "1", "99"], "name"=>"some new project"}}

实现上述要求的Backbone相关文件:

project.js

App.Models.Project = Backbone.Model.extend({
  urlRoot: '/projects',

  // Default attributes for the project.
  defaults: {
    description: "",
    user_ids: []
  },

  /* getters */      
});

user.js

App.Models.User = Backbone.Model.extend({
  /* getters */
});

form.js

App.Views.Projects.Common.Form = Backbone.View.extend({
  ...
  events: {
    "submit #new_project_form"   : "formSubmit"
  },

  formSubmit: function(event) {
    this.submitted($(event.target));
    return false;
  },

  submitted: function(formElement) {
    var newData = this.serializeFormData(formElement);
    this.model = new App.Models.Project({
      name        : newData.name,
      description : newData.description
    });

    this.saveFormData(newData);
    return false;
  },

  serializeFormData: function(formElement) {
    var fields = formElement.serializeArray();

    var serializedData = {};
    $.each(fields, function(index, field) {
      serializedData[field.name] = field.value;
    });

    return serializedData;
  },

  // THE IMPORTANT PART FOR THE POST REQUEST
  saveFormData: function(newData) {

    // preserve reference to view for callbacks
    var self = this;
    var project = this.model;

    project.set({
      // a list of user ids associated with a project
      "user_ids" :  this.view_variables.user_ids
    });

    var project_object = ({
      "project" :   _.clone(project.attributes)
    });

    $.ajax({
      type: 'POST',
      url: '/projects',
      data: project_object,
      dataType: "json",
      success: function() {
        self.$el.hide();
        self.addNewModelToCollection();
      }
    });

  },
  ...
});

代码有点冗长,其中包含一些特定于我的项目的代码。不过,相关部分在 saveFormData 函数中,其中使用了 jQuery ajax 函数。

如果您对导轨或 Backbone 部分有任何建议,请告诉我。我很乐意学习如何改进此解决方案。

【讨论】:

    【解决方案2】:

    我知道这是旧帖子,但这看起来很有趣:http://backbonerelational.org/

    【讨论】:

      猜你喜欢
      • 2014-12-01
      • 2014-05-20
      • 2020-06-18
      • 2014-05-31
      • 1970-01-01
      • 2017-12-08
      • 1970-01-01
      • 1970-01-01
      • 2018-03-20
      相关资源
      最近更新 更多