Question

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

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

谢谢你，珊

Answer 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部分有任何建议，请告诉我们。我很乐意学习如何改进这个解决方案。

Answer 2

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

从Backbone项目中保存条目到数据库关系（多对多）表

2 个答案: