我正在使用Backbone配合CoffeeScript和Handlebars创建搜索结果页面。我有两个视图:一个用于结果列表(ListView),另一个用于单个结果(ResultView)。简化的代码如下:
ListView = Backbone.View.extend
el: $("ul#results")
...
addItem: (result) ->
resultView = new ResultView({
model: result
})
resultView.parentView = this
this.el.append(resultView.render().el)
ResultView = Backbone.View.extend
tagName: "li"
className: "result"
events:
...
简要说明:
- ListView被分配给
ul#results
- 当结果添加到listview中时,将创建ResultView,该视图具有其父项的信息并呈现自身
- 对于ResultView,创建一个元素
li.result
(默认Backbone行为)
这是我用来渲染搜索结果的模板(简化版):
<li class="result">
<h1>
<a href="{{link}}">{{title}}</a>
</h1>
<p>{{snippet}}</p>
</li>
这是我的难题,你可能也遇到过:我在Backbone ResultView中定义了一个
li.result
,并在模板中也定义了它。但我做不到的是:
- 将ResultView绑定到模板中的
li.result
,因为它还不存在于DOM中 - 从模板中删除
li.result
,因为我仍然需要在服务器端呈现页面,以供那些没有启用JavaScript的人使用
ul#result
中?还是我从错误的角度看待了这个问题?谢谢!
li.result
,然后使用@delegateEvents确保事件被绑定。 - Phortuin