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

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

javascript jquery html backbone.js

Javascript 根据Backbone.js中的条件向不同el添加视图,javascript,jquery,html,backbone.js,underscore.js,Javascript,Jquery,Html,Backbone.js,Underscore.js,我的Backbone.js应用程序（Fiddle:）有问题。应用程序是列表（ol元素），其中包含嵌套列表。以下是我的起始HTML： <body> <ol id="flowList"></ol> </body> <script type="text/template" id="item-template"> <%= content %> </script> 我的收藏中有一个listenTo，它在

我的Backbone.js应用程序（Fiddle:）有问题。应用程序是列表（ol元素），其中包含嵌套列表。以下是我的起始HTML：

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

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

我的收藏中有一个

listenTo

，它在添加时使用

addOne

功能将

li

附加到

#flowList ol

元素：

addOne: function(todo) {
    var view = new ItemView({model: todo});
    $(this.el).append(view.render().el);
}

我的问题是：

如何将要添加的目标元素传递到

addOne

函数

如何将选项传递给

addOne

函数，而不是执行

$（this.el）。append

在

之后执行$（this.el.）


由于某种原因，我无法理解如何传递这些细节。下面是完整的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;
});

这里有一个指向小提琴的链接：
您可以跟踪所选项目，使您能够在其后面或内部插入新项目
在现有的enableEdit处理程序中，触发“项：选择”事件：
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;
   }
});

您应该能够对tab键行为执行类似的操作，方法是在调用项之前，在按下tab键时设置一个标志。创建。对于您的问题“如何将选项传递给addOne函数，而不是执行$（this.el）。append does$（this.el）。after？”执行此操作时。el=$（e.target）.parent（）；您正在使this.el指向父对象，并且在执行$（this.el）.append（view.render（）.el）时；您正在将“附加”到父对象，这与在this.el中添加“after”相同。此外，最好执行以下操作：var src=e.src | | e.originalTarget | | e.target；this.el=$（src.parent（）；有人想解释投票失败的原因吗？这不是最好的方法吗？
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;
   }
});