从UL异常中删除主干 [英] Backbone add remove from UL anomaly
问题描述
<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>
<ul id="friends-list">
</ul>
骨干网代码:
<script>
$(function() {
FriendList = Backbone.Collection.extend({
initialize: function(){
this.bind("add", function( model,options ){
var id = ( model.collection.indexOf(model) );
view.render(model,id);
});
this.bind("remove",function(model){
alert("here");
});
}
});
FriendView = Backbone.View.extend({
tagName: 'li',
events: {
'click #add-input': 'getFriend',
'click .button': 'removeFriend'
},
initialize: function() {
this.friendslist = new FriendList;
_.bindAll(this, 'render');
},
getFriend: function() {
var friend_name = $('#input').val();
this.friendslist.add( {name: friend_name} );
},
removeFriend: function(){
var friend_index = $('.button').attr('id');
alert(friend_index);
this.friendslist.remove();
},
render: function( model,id ) {
$("#friends-list").append("<li>"+ model.get("name")+"<button class=button id="+id+">"+"delete"+"</button>"+"</li>");
$('#input').val('');
}
});
var view = new FriendView({el: 'body'});
});
</script>
我的问题，我困在其中:
i)添加功能运行良好，当我单击删除按钮时，它移至removeFriend函数，但不转到收集和警告状态(此处")； ii)请帮助我编写代码，以通过单击删除按钮删除/删除li
谢谢
Backbone入门令人困惑.我从一个假设开始，即它可以做的比默认情况下还多.相反，它是一个基础构建块(请参见主线牵线木偶和类似项目).考虑到这些因素，我对您的代码进行了一些重构:
-
FriendView有太多的知识:它不必知道将自己插入DOM的位置. - 对Backbone如何处理渲染集合进行了一些假设.骨干网没有实现集合渲染，因此它由您自己决定.最简单的方法是呈现集合中的每个项目并将它们附加到DOM.因此，当一个项目被删除时，整个集合将再次呈现.听起来不好，对吧?实际上，这可能并不重要.您可以实施更复杂的渲染方法，但我的建议是从基础知识开始并从那里开始.
- DOM应该反映Backbone的状态(集合，模型)-您应避免尽可能直接地操作DOM，并允许Backbone状态更改/事件直接更新DOM.您可以从删除朋友的方式中看到这一点:从集合中删除朋友，这会触发集合上的
remove事件，该事件必然会呈现FriendListView.
那么如何解决您的代码?这就是我所做的: http://jsfiddle.net/Gd2Rs/
$(function() {
FriendList = Backbone.Collection.extend();
FriendListView = Backbone.View.extend({
initialize: function(e, c) {
this.collection.bind('add', this.render, this);
this.collection.bind('remove', this.render, this);
},
events: {
'click #add-input': 'addFriend'
},
addFriend: function() {
var friend_name = $('#input').val();
$('#input').val('');
this.collection.add({name: friend_name});
},
render: function() {
var list = this.el.find('#friends-list');
list.empty();
this.collection.each(function(model) {
var friendView = new FriendView({model: model});
list.append(friendView.render().el);
});
}
});
FriendView = Backbone.View.extend({
tagName: 'li',
events: {
'click .button': 'removeFriend'
},
removeFriend: function(){
this.model.collection.remove(this.model);
},
render: function() {
$(this.el).html(this.model.get('name') + "<button class='button'>"+"delete"+"</button>");
return this;
}
});
var view = new FriendListView({
el: $('#friends'),
collection: new FriendList()
});
});
请注意，我故意避免优化FriendListView.render，因为我认为这是使用Backbone的错误方法.您将需要构建自己的集合渲染(应重复使用)或使用诸如骨架牵线木偶之类的东西.使用Backbone的样板代码直接变得令人厌烦.
Iam developing a simple application to add and remove names from a ul. I have a input and a button , when i click button , text in input is appended to ul.My code is :
<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>
<ul id="friends-list">
</ul>
Backbone Code :
<script>
$(function() {
FriendList = Backbone.Collection.extend({
initialize: function(){
this.bind("add", function( model,options ){
var id = ( model.collection.indexOf(model) );
view.render(model,id);
});
this.bind("remove",function(model){
alert("here");
});
}
});
FriendView = Backbone.View.extend({
tagName: 'li',
events: {
'click #add-input': 'getFriend',
'click .button': 'removeFriend'
},
initialize: function() {
this.friendslist = new FriendList;
_.bindAll(this, 'render');
},
getFriend: function() {
var friend_name = $('#input').val();
this.friendslist.add( {name: friend_name} );
},
removeFriend: function(){
var friend_index = $('.button').attr('id');
alert(friend_index);
this.friendslist.remove();
},
render: function( model,id ) {
$("#friends-list").append("<li>"+ model.get("name")+"<button class=button id="+id+">"+"delete"+"</button>"+"</li>");
$('#input').val('');
}
});
var view = new FriendView({el: 'body'});
});
</script>
My problems , where iam stuck :
i) Add functionality is running just fine , when i click delete button , it goes to removeFriend function but does not goto the collection and alert ("here"); ii) Please Help me write code for deleting/removing an li on clicking delete button
Thank you
Getting started with Backbone is confusing. I started with the assumption that it could do more than it can by default. Instead, it is a building block to build upon (see backbone marionette and similar projects). I've refactored your code a bit with these things in mind:
FriendViewhas too much knowledge: it shouldn't have to know where to insert itself into the DOM.- Some assumptions are made about how Backbone works with rendering collections. Backbone doesn't implement collection rendering so it is left up to you. The easiest way is render each item in the collection and append them to the DOM. So when an item is removed, the entire collection is rendered again. Sounds bad, right? In practice it may not matter. You can implement more complex rendering approaches but my advice is to start with the basics and work from there.
- The DOM should reflect the state of Backbone (collections, models) -- you should avoid manipulating the DOM directly as much as possible and allow Backbone state changes/events to direct updating the DOM. You can see this in how removing a friend is done: remove the friend from the collection which triggers a
removeevent on the collection which is bound to rendering theFriendListView.
So how to fix your code? This is what I did: http://jsfiddle.net/Gd2Rs/
$(function() {
FriendList = Backbone.Collection.extend();
FriendListView = Backbone.View.extend({
initialize: function(e, c) {
this.collection.bind('add', this.render, this);
this.collection.bind('remove', this.render, this);
},
events: {
'click #add-input': 'addFriend'
},
addFriend: function() {
var friend_name = $('#input').val();
$('#input').val('');
this.collection.add({name: friend_name});
},
render: function() {
var list = this.el.find('#friends-list');
list.empty();
this.collection.each(function(model) {
var friendView = new FriendView({model: model});
list.append(friendView.render().el);
});
}
});
FriendView = Backbone.View.extend({
tagName: 'li',
events: {
'click .button': 'removeFriend'
},
removeFriend: function(){
this.model.collection.remove(this.model);
},
render: function() {
$(this.el).html(this.model.get('name') + "<button class='button'>"+"delete"+"</button>");
return this;
}
});
var view = new FriendListView({
el: $('#friends'),
collection: new FriendList()
});
});
Note that I've intentionally avoided optimizing FriendListView.render because I think it's the wrong way to go with Backbone. You're going to either need to build your own collection rendering which you should reuse or use something like backbone marionette. The boiler plate code using Backbone directly gets tiresome.
这篇关于从UL异常中删除主干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
