javascript - 相对于 View 的 Dom 的主干和范围

Question

我有一个模板，其中包含一个表单，该表单需要接受路线上停靠点的用户完整地址。一条路线可以有多个站点。

我创建了一个名为“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>

Answer 1

您已对 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 或类名称。