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

Adding views to different el based on condition in Backbone.js

本文关键字：el 视图 添加 条件 js Backbone      更新时间：2023-09-26

我有一个问题与我的Backbone.js应用程序(小提琴: http://jsfiddle.net/the_archer/bew7x010/3/)。该应用程序是list (ol元素)，其中嵌套列表。这是我的起始HTML:

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

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

在li中，如果我按enter键，我想在按enter的li之后插入一个新的li。

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

handleKeyboardShortcuts: function(e){
    if (e.keyCode == 13 && !e.shiftKey){
        e.preventDefault();
        this.el = $(e.target).parent();
        Items.create({contnet: "New Item!"});
    }
}

我的集合上有一个listenTo，在添加时，使用addOne函数将li附加到#flowList ol元素:

addOne: function(todo) {
    var view = new ItemView({model: todo});
    $(this.el).append(view.render().el);
}
我的问题是:
  1. 我如何将目标元素添加到addOne函数中?
  2. 我如何将一个选项传递给addOne函数，而不是做$(this.el).append做$(this.el).after ?

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

$(function() {
    var Item = Backbone.Model.extend({
    defaults: function() {
      return {
        content: "empty item..."
      };
    }
    });
    var ItemList = Backbone.Collection.extend({
        model: Item,
        localStorage: new Backbone.LocalStorage("todos-backbone"),
    });
    var Items = new ItemList;
    var ItemView = Backbone.View.extend({
        tagName:  "li",
        template: _.template($('#item-template').html()),
        events: {
          "click": "enableEdit",
          "blur": "disableEdit",
        },
        initialize: function() {
          this.listenTo(this.model, 'change', this.render);
          this.listenTo(this.model, 'destroy', this.remove);
        },
        render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        },
        enableEdit: function(){
            this.$el.attr("contenteditable","true").focus();
        },
        disableEdit: function(){
            this.$el.attr("contenteditable","false");
        }
    });
   var AppView = Backbone.View.extend({
    el: $("#flowList"),
    events: {
      "keydown li": "handleKeyboardShortcuts"
    },
    initialize: function() {
        this.listenTo(Items, 'add', this.addOne);
        this.listenTo(Items, 'reset', this.addAll);
        this.listenTo(Items, 'all', this.render);
        Items.fetch();
        if (Items.length === 0){
            Items.create({content: "Sample Item!"});
        }
    },
    render: function(e) {
        console.log(e);
    },
    addOne: function(todo) {
      var view = new ItemView({model: todo});
      $(this.el).append(view.render().el);
    },
    addAll: function() {
      Items.each(this.addOne, this);
    },
    handleKeyboardShortcuts: function(e){
        if (e.keyCode == 13 && !e.shiftKey){
            e.preventDefault();
            this.el = $(e.target).parent();
            Items.create({contnet: "New Item!"});
        }
    }
  });
  var App = new AppView;
});

这里是小提琴的链接:http://jsfiddle.net/the_archer/bew7x010/3/

您可以跟踪所选项，使您能够在其后面或其中插入新的项。

在现有的enableEdit处理程序中，触发一个'item:select'事件:

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

然后在你的AppView中，当你添加一个新项目时，为这个新项目附加一个监听器，它会更新'selectedItem'属性的值。

然后你可以根据属性的状态将新条目插入到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.

之前，您应该能够对制表键行为做类似的事情，通过在按下制表键时设置一个标志。
相关文章：