我有一个模板，其中包含一个表单，需要接受用户在路由上停止的完整地址。一条路线可以有多个站点。
我创建了一个名为“StopView”的视图，该视图与名为“Stop”的模型相关联。
以下是StopView的代码并添加了一个新的Stop：
StopView = Backbone.View.extend({
el:"#stops",
template: stopTpl,
initialize: function() {
this.o = StopsArray.length;
//console.log(this.o);
},
render: function() {
$(this.el).html(_.template(this.template));
return this;
},
events: {
// "keypress #test": "submit",
"click #another": "another",
"typeahead:selected .typeahead": "onSelected"
},
another: function() {
StopsArray.add(this.model);
以下是创建新视图并附加模板的代码，它是名为AppView的父视图的一部分。它发生在收集（停止）更改：
addStop: function ()
{
var theStop = new StopView({model:new Stop()});
if(StopsArray.length==1)
{
theStop.render();
}
else
{
theStop.$el.unbind()
theStop.$el.append(_.template(theStop.template));
theStop.setElement('#stops');
}
现在，我正在尝试将文本应用于#stops标记内的表单中的所有值。但是当我这样做时，它适用于两组输入，而不仅仅是当前停止视图的输入。
基本上，在追加时我需要将视图的范围转移到附加的新html，而不是所有的html（包括从第一个视图渲染的内容）。
我不确定，但我从todo.js示例中读到，Backbone应该知道你所在的Dom元素，即使它们是相同的： http://documentcloud.github.io/backbone/docs/todos.html#section-16
编辑：是的，我在抓取/更改输入字段的值时使用“this。$（'＃domelement'）以确保它与该视图相关联。
Edit2：基本上html看起来像：
<div id="stops><form id="test_form">content</form></div>
Edit3：这是停止模板和索引文件
<script type="text/javascript" src="libs/typeahead_function.js"></script>
<form id="test_form" class="form-group form-horizontal form-sqaure">
<div class="row-fluid">
<div class="col-md-7" style="float:left">
<div class="webres-stop panel panel-default">
<div class="panel-heading first-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#first<% print(StopsArray.length) %>">
<h2>Stop <% print(StopsArray.length) %> <button type="button" class="btn btn-square" id="another" style="float:right">Add Stop</button></h2>
</a>
</div>
<!-- This is the actual stop content -->
<div id="first<% print(StopsArray.length) %>" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label for="address" class="col-sm-4 control-label">Address: </label>
<div class="col-lg-7">
<input id="test" name="address" type="text" class="address typeahead form-control form-control-square" placeholder="Enter an address">
</div>
</div>
<div id="datetime" class="form-group">
<label for="datetime" class="col-sm-4 control-label">Date and Time: </label>
<div class="col-lg-7">
<input class="form-control form-control-square" type="text" name="datetime">
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#second<% print(StopsArray.length) %>">
Address Details
</a>
</h4>
</div>
<div id="second<% print(StopsArray.length) %>" class="panel-collapse collapse" data-target>
<div class="panel-body">
<div class="row">
<div class="form-group col-lg-6">
<label for="address">Street Number: </label>
<input class="form-control form-control-square" type="text" id="StreetNumber" name="StreetNumber">
</div>
<div class="form-group col-lg-6">
<label for="address">Street: </label>
<input class="form-control form-control-square" type="text" name="StreetName">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="address">City: </label>
<input class="form-control form-control-square" type="text" name="City">
</div>
<div class="form-group col-lg-6">
<label for="address">State: </label>
<input class="form-control form-control-square" type="text" name="State">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="address">Postal Code: </label>
<input class="form-control form-control-square" type="text" name="Zipcode">
</div>
<div class="form-group col-lg-6">
<label for="address">County: </label>
<input class="form-control form-control-square" type="text" name="Country">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#third<% print(StopsArray.length) %>">
Airport Information
</a>
</h4>
</div>
<div id="third<% print(StopsArray.length) %>" class="panel-collapse collapse" data-target>
<div class="panel-body">
<div class="row">
<div class="form-group col-lg-2">
<label for="address">Airline: </label>
<input class="form-control form-control-square" type="text" name="airline">
</div>
<div class="form-group col-lg-10">
<label for="address">Flight Number: </label>
<input class="form-control form-control-square" type="text" name="flight_number">
</div>
<div class="row">
<div class="form-group col-lg-6">
<label for="address">Flight Time: </label>
<input class="form-control form-control-square" type="text" name="flight_time">
</div>
<div class="form-group col-lg-6">
<label for="address">Terminal: </label>
<input class="form-control form-control-square" type="text" name="terminal">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#datetime').datetimepicker();
});
<body style="background-color:#3366CC">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="header">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="content">
</div>
<br /><br />
<div class="panel-group" id="accordion">
<div id="stops"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您已将StopView硬编码为stops的ID：
StopView = Backbone.View.extend({
el:"#stops",
...
});
由于您似乎正在动态创建这些视图，因此您只需使用元素类型，例如div。您还可以使用以下任何一种方法“标记”以供日后参考：
StopView = Backbone.View.extend({
el:"div",
className: "stops",
id: "stop1"
...
});
请记住，您不需要使用上述任何一项，Backbone将默认使视图元素类型为“div”而没有id或类名。
答案 1 :(得分：0)
HTML ID必须为unique to the entire document。您可以使用相同的类名拥有任意数量的元素，但每个ID只能使用一次。
事实上，许多现代网络开发实践avoid the use of IDs完全在我看来并不是一个坏主意。