Question

I’m evaluating backbone.js, backbone-forms and Rails, and I have some problems …

I have a view where I create a new model and a form, and I want to display this form with other html elements, so I’m using a template.

expedients_new.js.coffee
------------------------

class Globalbackbone.Views.ExpedientsNew extends Backbone.View

template: JST['expedients/new']

render: ->

@form = new Backbone.Form({
    model: @model
}).render();

console.log(@model.procedencia) 
console.log(@form) 
$(@el).html(@template(expedient: @model, form: @form ))
this

This view uses a template, and in this template, I want to render the form there, but I don’t know how to do it …

new.jst.eco
-----------

<h1>BackBones with GlobalWeb</h1>

<h2>Adding New Expedient</h2>

<%=@expedient.date%>
<hr>
<%=@form.el%>
<hr>
<%=@form%>

Thanks in advance,

regards

EDIT

The current browser output where I expect the form is:
[object HTMLFormElement]

Answer 1

The usage instructions indicate that @form will be a Backbone view:

var form = new Backbone.Form({
    model: user
}).render();

and that means that @form.el will be a DOM element that you need to insert into the DOM:

$('body').append(form.el);

And if you look at the source, you’ll see that Backbone.Form is a Backbone.View subclass:

var Form = (function() {
  return Backbone.View.extend({
    //...

Your code is trying to treat @form as though it was a string containing HTML:

<%=@form%>

so you end up with standard stringified version of a DOM element: [object HTMLFormElement].

I think you’ll have better luck if you have something like this in your view:

@$el.append(@template(expedient: @model))
@$el.append(@form.el)

and in your template:

<h1>BackBones with GlobalWeb</h1>

<h2>Adding New Expedient</h2>

<%=@expedient.date%>
<hr>

Then your form should appear after the <hr>.