Instantiate a Rails model with custom meta-attributes in backbone.js - backbone.js

Question

I want to create form fields in a Backbone view based on a Rails model along with Rails model validations, without a template. To accomplish this I used JBuilder like:
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 ]
I'm sure you can see where I'm going with this...
So, the goal would be to iterate over the fields and append to the DOM my inputs, styling accordingly to the model.required array. Naturally the states field is there to dynamically insert options to a select for the states select. The validation is certainly only really performed by the server response on error (don't really care to do it on the client, but I suppose I could) by just reading the errors response.
So the question, I guess would be:
1) Do I just instantiate the Backbone model in the View constructor?
2) would you do that something like:
this.model.fetch({url:'/recipients/new',
success:function(index,model)
{
this.model = model.responseText
}
});
Better way to do this?
I did see powmedia/backbone-forms though it seems like double work for me and other things I would have to work around, and of course, I would have to re-define everything on the client.
If nothing more, at least this would be a point of reference for others with like thoughts (I couldn't find anything about this)
Possible Solution?
coffescript:
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 )
Then I should be good to go to create the form in the Views render

Answer 1

Your situation is not special, the only thing you have to do in changing your point of view: you are just dealing with a Model that has to be fetched from the server and rendered in a View.
The rendering is very complex, that's true, you will have to work in your View code to solve it.
You can try something like this:
// 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 });
This code is depending in an HTML like this:
<form id="form">
<div class="fields"></div>
</form>
Of course this is a very simplified example, there are more elegant solutions like delegating in sub-views for any family of fields but I just wanted to offer you a starting point.