Question

我的Backbone.js应用程序出了问题（小提琴： http://jsfiddle.net/the_archer/bew7x010/3/）。该应用程序是列表（ol元素），其中包含嵌套列表。这是我的首发HTML：

<body>
    <ol id="flowList"></ol>
</body>

<script type="text/template" id="item-template">
    <%= content %>
</script>

列表为空时。我使用Backbone.js在其中添加了一个新的<li>元素，并专注于li。

当在li范围内时，如果我按下输入键，我想在我按下<{1}}之后插入一个新的li 在

中输入

如果我按 tab ，我想在list元素中添加一个新的子li元素。我在ol元素中处理按键，如下所示：

li

我的收藏集中有一个handleKeyboardShortcuts: function(e){ if (e.keyCode == 13 && !e.shiftKey){ e.preventDefault(); this.el = $(e.target).parent(); Items.create({contnet: "New Item!"}); } }，在添加后，使用listenTo函数将li附加到#flowList ol元素：

addOne

我的问题是：

如何将要添加的目标元素传递给addOne: function(todo) { var view = new ItemView({model: todo}); $(this.el).append(view.render().el); }函数？
如何将选项传递给addOne函数，而不是addOne执行$(this.el).append？

出于某种原因，我无法理解如何传递这些细节。这是完整的Backbone.js代码：

$(this.el).after

以下是小提琴的链接：http://jsfiddle.net/the_archer/bew7x010/3/

Answer 1

您可以跟踪所选项目，使您能够在其之后或之内插入新项目。

在现有的enableEdit处理程序中，触发一个＆＃39;项目：select＆＃39;事件：

var ItemView = Backbone.View.extend({
    enableEdit: function(){
        this.trigger('item:select', this);
        this.$el.attr("contenteditable","true").focus();
    }
});

然后在AppView中，当您添加新项目时，为新项目附加一个监听器，以更新“选定项目”的值。属性。

然后，您可以根据该属性的状态将新项目插入到dom中：

var AppView = Backbone.View.extend({
    addOne: function(todo) {
        var view = new ItemView({model: todo});
        this.listenTo( view, 'item:select', this.handleItemSelect );

        if(this.selectedItem) {
            $(this.selectedItem.el).after(view.render().el);
        }
        else {
            $(this.el).append(view.render().el);
        }
    },
    handleItemSelect: function(item) {
       console.log('item selected:', item);
       this.selectedItem = item;
   }
});

在调用Items.create之前，您可以通过在按Tab键时设置标志来为Tab键行为执行类似的操作。

根据Backbone.js中的条件将视图添加到不同的el

1 个答案: