javascript - 将 subview 添加到backbone.js主视图中更改位置

Question

所以我现在正在修改 Backbone.js，但无法弄清楚一些事情。所以我有一个 HTML 列表，这是我在主干中的主要 View 。我将每个 subview 声明为一个 li 元素，并将其附加到主列表中。

每个 li 项目都是内容可编辑的。当用户在一个 li 元素中按下“enter”键时，我想在用户键入“enter”的元素下方添加一个新的 li 元素。

当用户按下“tab”键时，我想向当前的 li 添加另一个列表(ol 元素)以创建嵌套列表。

我的问题是如何从主视图知道哪个 subview 中已键入“enter”或“tab”键，以便我可以在其后插入或附加新元素？

到目前为止我的代码:

http://jsfiddle.net/the_archer/2p7u4bdj/2/

最初，当列表为空时，会向 ol 元素添加一个默认的“Sample”li 项，从而产生以下结构:

<div class="dd" id="nestable3">
    <ol class="dd-list">
         <li data-id="1408256371250" class="dd-item dd3-item">
              <div class="dd3-content">Sample</div>
         </li>
    </ol>
</div>

在第一个 li“样本”中按 Enter 键时，我需要在按下 Enter 键的 li 后面插入另一个 li，结果如下:

<div class="dd" id="nestable3">
    <ol class="dd-list">
         <li data-id="1408256371250" class="dd-item dd3-item">
              <div class="dd3-content">Sample</div>
         </li>
         <li data-id="1408256371251" class="dd-item dd3-item">
              <div class="dd3-content">Sample 2</div>
         </li>
    </ol>
</div>

在上面的示例 li 中按 Tab 键时，我想在 li 中附加一个新的子列表，制作一个如下所示的嵌套列表:

<div class="dd" id="nestable3">
    <ol class="dd-list">
         <li data-id="1408256371250" class="dd-item dd3-item">
              <div class="dd3-content">Sample</div>
              <ol class="dd-list">
                  <li class="dd-item dd3-item" data-id="1408256371252">
                      <div class="dd3-content">Item 16</div>
                  </li>
              </ol>
         </li>
         <li data-id="1408256371251" class="dd-item dd3-item">
              <div class="dd3-content">Sample 2</div>
         </li>
    </ol>
</div>

正如我所说，我的问题是如何附加事件，以便我知道哪个 li 已被键入，以及如何创建一个新项目并将其附加到所需的位置。我在这里有点迷失了。

我觉得我需要在代码中进行定位:

addOne: function (todo) {
    var view = new TodoView({
        model: todo
    });
    this.$(".dd-list").append(view.render().el);
},

但是我不知道如何获取当前正在使用的 li 项目，然后添加一个子项或在其后面。

注意:我正在根据网站上 Backbone.js 待办事项示例的待办事项代码来处理此代码。

Answer 1

我建议利用 jquery 事件委托(delegate)并在主视图中处理 li 元素上的事件，然后访问目标元素并对其执行任何您需要的操作(附加新元素或使其可编辑)

var AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#nestable3"),

    // Delegated events for creating new items, and clearing completed ones.
    events: {
        "click il": "ToDoClicked",
        "keypress il": "ToDoKeyPress"
    },
    ToDoClicked: function(e){
        //you can create a ToDOView on $(e.target) and call whatever action you need
    },
    ToDoKeyPress: function(e){
        //you can create a ToDOView on $(e.target) and call whatever action you need
    }
});