Question

Is there a fancy way of binding a view to html already renderer in the page?

Example your server load all your page html, then you load views on top of that html without using the render method the first time you load the page.

Answer 1

I’ve done something similar to what I think you’re trying to do. In my case, I added Backbone functionality on top of existing forms. Here’s a stripped down example:

Existing HTML:

<div id="my-app">
  <form name="input" action="html_form_action.asp" method="get">
    Username: <input type="text" name="user" id="username" />
    <input type="submit" value="Submit" />
  </form> 
</div>

Backbone:

var MyFormView = Backbone.View.extend({
  events: {
    "submit form": "formHandler"
  },
  formHandler: function(evt) {
    evt.preventDefault();
    var nameVal = $('#username').val();
    this.$el.append('<p>hello: ' + nameVal + '</p>');
  }
});

$().ready(function(){
  var myForm = new MyFormView({el: "#my-app"});
});

The key is passing your existing html as the “el” property when you create your view.