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”属性传递。

Answer 2

我不确定花式方法的含义，但您的视图不需要为自己的html呈现el。您可以轻松地将视图附加到页面上的现有元素，只需将其分配给el即可。如果您想稍后分配视图的el（例如，您想要“切换”其el），那么您可以使用setElement方法执行此操作。使用setElement也会创建缓存的$el并移动任何绑定事件。

Answer 3

我不确定你目前在做什么，但我制作了一个只使用Backbone Views的JSFiddle - 没有模型或收藏或路由器担心。

您可以使用它，看看如何将主页面视图加载到其容器中。

这是小提琴：http://jsfiddle.net/phillipkregg/tVmTM/71/

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

3 个答案: