我有一个模板，其中包含一个表单，该表单需要接受路线上停靠点的用户完整地址。一条路线可以有多个站点。
我创建了一个名为“StopView”的 View ，它与一个名为“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);
下面是创建新 View 并附加模板的代码，它是名为 AppView 的父 View 的一部分。它发生在(停靠点)集合发生变化时:
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 标记内表单中的所有值。但是当我这样做时，它适用于两组输入，而不仅仅是当前停止 View 的输入。
基本上，在附加时，我需要将 View 的范围转移到附加的新 html，而不是所有 html(包括从第一个 View 呈现的内容)。
我不确定，但我从 todo.js 示例中读到，Backbone 应该知道您所在的 Dom 元素，即使它们是相同的: http://documentcloud.github.io/backbone/docs/todos.html#section-16
编辑:是的，我在获取/更改输入字段的值时使用“this.$('#domelement') 以确保它与该 View 关联。
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>
最佳答案
您已对 StopView 进行硬编码，使其 ID 为 stops:
StopView = Backbone.View.extend({
el:"#stops",
...
});
由于您似乎是在内存中动态创建这些 View ，因此您只需使用元素类型(例如 div)即可。您还可以使用以下任意一项来“标记”以供以后引用:
StopView = Backbone.View.extend({
el:"div",
className: "stops",
id: "stop1"
...
});
请记住，您不需要使用上述任何内容，Backbone 将默认将 View 元素类型设置为“div”，不带 id 或类名称。
关于javascript - 相对于 View 的 Dom 的主干和范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21941259/