Question

所以我现在正在修补Backbone.js并且无法弄明白。所以我有一个HTML列表，这是我在骨干网中的主要观点。我将每个子视图声明为一个li元素，我将其附加到主列表中。

每个项目都是满足的。当用户按下＆＃39;输入＆＃39;在一个li元素中的键，我想在用户键入的一个元素下方添加一个新的li元素＆＃39;输入＆＃39;从

当用户按下＆＃39;标签＆＃39;键，我想在当前的li中添加另一个列表（ol元素）来创建嵌套列表。

我的问题是如何从主视图中知道＆＃39;输入＆＃39;或者＆＃39; tab＆＃39;键已被键入，以便我可以插入或附加新元素吗？

到目前为止我的代码：

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

最初，当列表为空时，默认为＆＃34; Sample＆＃34; li项添加到ol元素，导致以下结构：

<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>

按下第一个＆＃34;样品中的回车键＆＃34;我需要在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项目，然后添加一个孩子或之后。

N.B：我正在使用网站上Backbone.js todo示例的todo代码处理此代码。

Answer 1

我建议利用jquery事件委托并在主视图中处理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
    }
});

将子视图添加到backbone.js主视图中的更改位置

1 个答案: