0

テンプレートを使用せずに、Rails モデルの検証と共に、Rails モデルに基づいて Backbone ビューにフォーム フィールドを作成したいと考えています。これを実現するために、次のような JBuilder を使用しました。

1 json.(@recipient, :firstName,
2       :lastName,
3       :street1,
4       :street2,
5       :city,
6       :state,
7       :zip,
8       :phone1,
9       :phone2)
10 json.required Recipient.validators[0].attributes
11 json.fields Recipient.accessible_attributes.reject {|x| x==""}
12 json.states [ 
13               ['Alabama', 'AL'],
14               ['Alaska', 'AK'],
15               ['Arizona', 'AZ'],
16               ['Arkansas', 'AR'],
                 ...
64               ['Wyoming', 'WY']
65             ]

これで私がどこに向かっているのかわかると思います...

したがって、目標は、フィールドを反復処理し、入力を DOM に追加して、model.required 配列に従ってスタイルを設定することです。当然のことながら、状態フィールドは、状態選択の選択にオプションを動的に挿入するためにあります。検証は確かに、エラーの応答を読み取るだけで、サーバーの応答によってのみ実際に実行されます (クライアントで実行することはあまり気にしませんが、可能だと思います)。

したがって、質問は次のようになります。

1) View コンストラクターで Backbone モデルをインスタンス化するだけですか?

2）あなたはそれを次のようにしますか：

this.model.fetch({url:'/recipients/new', 
  success:function(index,model)
   {
     this.model = model.responseText
   }
});

これを行うより良い方法は？powmedia/backbone-forms は確かに見ましたが、これは私にとって二重の作業のように思えますが、他にも対処しなければならないことがあり、もちろん、クライアントですべてを再定義する必要があります。

それ以上ではないにしても、少なくともこれは、同じような考えを持つ他の人の参考になるでしょう（これについては何も見つかりませんでした）

考えられる解決策は?

コフェスクリプト:

1 class Senditbacklater.Models.Recipient extends Backbone.Model
2   
3   url: '/recipients'
4   
5   initialize: ->
6     $.getJSON('/recipients/new', (data) =>
7       $.each(data, (key,val) =>
8         obj = {}
9         obj[key] = val
10         this.set(obj)
11       ) 
12     )

次に、Views render でフォームを作成します。

4

1 に答える 1

0

あなたの状況は特別なものではありません。視点を変えるためにしなければならない唯一のことは、サーバーからフェッチして でレンダリングするModel必要がある を扱っているだけです。View

レンダリングは非常に複雑です。それは本当です。それを解決するには、View コードで作業する必要があります。

次のようなことを試すことができます：

// code simplified and no tested
var MyForm = Backbone.Model.extend({
  url: "/recipients/new"
});

var MyFormView = Backbone.View.extend({
  initialize: function(){
    this.model.on( "reset", this.render, this );
  },

  render: function(){
    _.each( this.model.fields, function( field ){
      this.$el.find( ".fields" ).append( "<label>" + field + "</label><input name=\"" + field + "\" />" );
    }, this );

    // ... more render logic here

    return this;
  }
});

var myForm = new MyForm();
var myFormView = new MyFormView({ el: "#form", model: myForm });

このコードは、次のような HTML に依存しています。

<form id="form">
  <div class="fields"></div>
</form>

もちろん、これは非常に単純化された例です。任意のフィールドファミリのサブビューで委任するなど、より洗練されたソリューションがありますが、出発点を提供したかっただけです。

于 2012-08-14T10:19:11.183 に答える