将骨干视图绑定到html已渲染器

Question

是否有一种奇特的方式将视图绑定到页面中的html已渲染器？

例如,您的服务器加载所有页面html,然后在第一次加载页面时不使用render方法在该html之上加载视图.

Answer 1

我做了类似于我认为你想做的事情.就我而言,我在现有表单之上添加了Backbone功能.这是一个精简的例子:

现有的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>

骨干:

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

关键是在创建视图时将现有的html作为"el"属性传递.