1

現在、ユーザーとプロジェクトの 2 つのバックボーン モデルがあります。新しいプロジェクトの作成と、現在存在するユーザー (データベース ユーザー テーブルのエントリ) とこのプロジェクトとの関連付けを可能にするフォームを含むバックボーン ビューが必要です。ユーザーがこのフォームに入力して保存ボタンをクリックすると、新しいプロジェクトがデータベース (projects テーブル内) に保存され、保存されたプロジェクトと関連ユーザー間の関係が関係テーブル (projects_users テーブルを含む) に保存されます。各関係の対応するプロジェクト ID とユーザー ID)。現在、プロジェクト情報を保存できますが、Backbone-relational を使用して projects_users テーブルにデータを取得できませんでした。

上記の機能を実現するための最良のアプローチは何だと思いますか? テンプレートとして使用できる特定のコードを教えていただければ幸いです。

ありがとう、アレクサンドラ

4

2 に答える 2

1

イライラする試行錯誤の期間を経て、ようやくコードを機能させることができました。美しくはないが機能的で、今から改良を考え始める。うまくいけば、他の何人かの人々がこの情報が役に立つと思うでしょう...

私を正しい軌道に乗せた 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 は、レールで多対多の関係を設定する最良の方法ではないことをさまざまな場所で読みました。それにもかかわらず、has_many 定義を使用して同じ機能を得ることができませんでした。project.rb のコメント部分は、この別のアプローチを試みた方法です。ファイル user.rb には対応するコードが含まれていましたが、簡単にするために削除しました。

ここで、バックボーン フォーム ビューで実行する必要があったのは、Rails projects_controller.rb が認識できる JSON オブジェクトを含む POST 要求を送信することでした。最初に、いくつかの POST リクエストを試してみましたが、成功しませんでした (そして、私を導くエラーはありませんでした)。しかし、その後、ユーザーを特定のチームに追加できるチーム用のフォームを以前に実装したことを思い出しました (HABTM チェックボックス - この機能のレールキャストがあります)。この例を見た後、私は 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"}}

上記の要求を達成するためのバックボーン関連ファイル:

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();
      }
    });

  },
  ...
});

コードはやや冗長で、私のプロジェクトに固有のコードが含まれています。それでも、関連する部分は、jQuery ajax 関数が使用されている saveFormData 関数にあります。

レールまたはバックボーン部分について何か提案があれば教えてください。このソリューションを改善する方法を教えていただければ幸いです。

于 2012-06-27T03:10:14.443 に答える