我的 Backbone.js 应用程序有问题 (Fiddle: http://jsfiddle.net/the_archer/bew7x010/3/ )。该应用程序是列表(ol 元素)，其中包含嵌套列表。这是我的起始 HTML:
<body>
<ol id="flowList"></ol>
</body>
<script type="text/template" id="item-template">
<%= content %>
</script>
当列表为空时。我添加一个新的 <li>其中的元素使用 Backbone.js 并关注 li .
当在 li 内时，如果我按 enter 键，我想插入一个新的 li在 li 之后我在里面按了 enter。
如果我按tab，我想添加一个新的sub 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做$(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;
});
这是 fiddle 的链接: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 之前，您应该能够通过在按下 tab 键时设置一个标志来对 tab 键行为执行类似的操作。
关于javascript - 根据 Backbone.js 中的条件向不同的 el 添加 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25379489/