我是第一次使用 Backbone.js，并试图弄清楚它是如何工作的。我有一个搜索表单，它通过 Ajax 获取结果并将它们动态地写入页面。
我现在正试图弄清楚如何最好地在 Backbone 中构建它 -我读了这个 SO question，但我不完全理解如何将表单和结果连接在一起。
这是我的 HTML：
<form id="flight-options"> <!-- options for user to choose-->
<input type="radio" name="journey" value="single">Single<br/><input type="radio" name="journey" value="return">Return
<input type="checkbox" name="airline" value="aa">AA<br><input type="checkbox" name="airline" value="united">United
</form>
<div id="results"> <!-- results, written by Ajax -->
<h3>Results</h3>
<ul id="results-list">
</div>
以下是我正在考虑构建 Backbone 代码的方式：
var SearchModel = Backbone.Model.extend({
performSearch: function(str) {
// fire the ajax request. provide a bound
// _searchComplete as the callback
},
_searchComplete: function(results) {
this.set("searchResults", results);
}
});
var SearchFormView = Backbone.View.extend({
tagName: "form",
id: "flight-options",
events: {
"click input": "getResults"
},
getResults: function() {
// Get values of selected options, use them to construct Ajax query.
// Also toggle 'selected' CSS classes on selected inputs here?
this.model.performSearch(options);
}
});
var SearchResultsView = Backbone.View.extend({
tagName: "ul",
id: "results-list",
initialize: function() {
this.model.on("change:searchResults", this.displayResults, this);
},
displayResults: function(model, results) {
//append results to results-list here.
//update contents of blurb here?
}
});
var searchModel = new SearchModel();
var searchFormView = new SearchFormView({ model: searchModel });
var searchResultsView = new SearchResultsView({ model: searchModel });
我的问题：
- 这基本上是一个合理的结构，一个视图用于表单，一个视图用于结果——第一个视图更新模型，第二个视图观察模型？
<h3>当有新结果时，我还想更新结果标题的内容- 在上面的代码中，最明智的地方是哪里？selected当用户单击表单输入时，我想在输入上切换类-在上面的代码中执行此操作的逻辑位置在哪里？
谢谢你的帮助。