将Backbone视图绑定到已呈现的HTML

Question

有没有一种高级的方法将视图绑定到已在页面中呈现的html上？

例如，您的服务器加载了所有网页html，然后您在第一次加载页面时不使用渲染方法在其上加载视图。

- The Orca

---

我不太确定你的问题是什么。由于JavaScript是客户端语言，任何JS框架都可以修改DOM元素而无需依赖服务器（除非您正在使用服务来加载与AJAX相关的数据）。这就是单页应用程序的整个理念 - 服务器发送一个包含所有模板的HTML视图，JavaScript渲染视图并操作HTML。您能更具体地描述一下您正在处理的内容吗？ - PhillipKregg

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>

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

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

- squaretone

Answer 2

我不确定你所说的“fancy method”是什么意思，但你的视图不需要为它们的el自己呈现html。你可以通过将其分配给其el来轻松地将视图附加到页面上的现有元素。如果您想在以后的时间点分配视图的el（比如说你想“切换”它的el），那么您可以使用setElement方法这样做。使用setElement还会创建缓存的$el并移动任何绑定事件。

- Jack

Answer 3

我不确定你目前正在做什么，但我制作了一个 JSFiddle，只使用了 Backbone Views - 不用担心 Models 或 Collections 或 Routers。

你可以玩弄这个例子，看看主页面视图如何被加载到其容器中。

这是 Fiddle 的链接: http://jsfiddle.net/phillipkregg/tVmTM/71/

- PhillipKregg