Javascript Dom相对于视图的主干和范围

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

我创建了一个名为“StopView”的视图，它与一个名为“Stop”的模型相关联

以下是StopView和添加新站点的代码：

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标记内表单中的所有值。但当我这样做时，它适用于两组输入，而不仅仅是当前停止视图的输入

基本上，在append上，我需要将视图的范围转移到追加的新html，而不是所有html（包括从第一个视图呈现的内容）

我不确定，但我从todo.js示例中了解到主干应该知道您使用的是哪个Dom元素，即使它们是相同的：

编辑：是的，我在获取/更改输入字段的值时使用了“this.$（“#domelement”），以确保它与该视图相关联

Edit2：基本上html看起来像：

<div id="stops><form id="test_form">content</form></div>

---

您已将
停止视图
硬编码为id为
停止
：

StopView = Backbone.View.extend({

  el:"#stops",

  ...

});

由于您似乎是在内存中动态创建这些视图，因此您只需使用元素类型，例如
div
。您也可以使用以下任一项来“标记”以供以后参考：

StopView = Backbone.View.extend({

  el:"div",
  className: "stops",
  id: "stop1"
  ...

});

请记住，您不需要使用上述任何一种方法，主干将默认为使视图元素类型“div”不带id或类名。
HTML id必须是。您可以使用相同类名的任意多个元素，但每个id只能使用一次

事实上，许多现代web开发实践都是完全独立的，在我看来，这不是一个坏主意。
它根本不必存在——但与所有HTML一样，您需要确保您的id对于文档是唯一的。我已经更新了进一步的解释。此外，如果此视图关联，您也可以通过附加模型id来使id唯一但是，它如何知道哪些元素属于哪个视图？它如何知道在页面上的何处插入模板？我已经用html的基本解释更新了我的问题。它如何知道将模板放入#stops？如果需要更改，我应该如何使html看起来像什么？根据您发布的内容，我很抱歉假设您想在该div中添加多个视图，且id为stops？是的，如果不清楚，很抱歉，发布整个模板会很困难，因为它包含大量html
StopView = Backbone.View.extend({

  el:"#stops",

  ...

});

StopView = Backbone.View.extend({

  el:"div",
  className: "stops",
  id: "stop1"
  ...

});