Javascript 如何侦听引用的DOM元素之外的内容

我有一个库视图，它引用HTML中的表，如下所示：

//appview
var app = app || {};
app.LibraryView = Backbone.View.extend({
el: '#contacts',

//html
<table id="contacts" class="table table-striped">
<tr><td style="width: 20px;"><center><b>Id</b></center></td>
<td><b>Name</b></td>
<td><b>Surname</b></td>
<td><b>PhoneNb</b></td>
<td><b>Options</b></td>
</tr>
</table>

<table class="table table-striped" id="contacts">
<tr><td style="width: 20px;"><center><b>Id</b></center></td>
<td><b>Imię</b></td>
<td><b>Nazwisko</b></td>
<td><b>Nr tel.</b></td>
<td><b>Opcje</b></td>
</tr>
</table>

<div id="addContact"> 
<div class="input-group">
    <input type="text" id="Name" class="form-control" placeholder="Kevin">
    <input type="text" id="Surname" class="form-control" placeholder="Smitt">
    <input type="text" id="PhoneNb" class="form-control" placeholder="51664354354.">
<input type="text" id="id" class="form-control" placeholder="5">
</div> 
<button id="add" class="btn">Dodaj kontakt</button>
</div>

var app = app || {};
app.LibraryView = Backbone.View.extend({
el: '#books',
initialize: function( initialBooks ) {

this.collection = new app.Library( initialBooks );
this.render();
this.listenTo( this.collection, 'add', this.renderBook );
},

events:{
'click #add':'addBook'
},

addBook: function( e ) {
e.preventDefault();
var formData = {};
$( '#addBook div' ).children( 'input' ).each( function( i, el ) {
if( $( el ).val() != '' ){
formData[ el.id ] = $( el ).val();
}
});

this.collection.add( new app.Book( formData ) );
},

// render library by rendering each book in its collection
render: function() {
this.collection.each(function( item ) {
this.renderBook( item );
}, this );
},
// render a book by creating a BookView and appending the
// element it renders to the library's element
renderBook: function( item ) {
var bookView = new app.BookView({
model: item
});
this.$el.append( bookView.render().el );
}
});

---

如何更改代码，以便能够从html中引用元素之外的输入获取数据？我应该创建另一个视图还是另一种可能性？

为您的表单创建一个引用您的集合的视图。比如：

app.ContactForm = Backbone.View.extend({
  el: '#addContact',
  events: {
    'click #add': 'addContact'
  },
  addContact: function(ev) {
    var formData = {};
    ev.preventDefault();
    this.$(':input').each(function() {
      if ( $.trim(this.value) !== '' ) {
        formData[this.id] = this.value;
      }
    });
    this.collection.add(new Contact(formData));
  }
});

然后使用公共集合初始化两个视图：

app.contactForm = new app.ContactForm({ collection: mycollection });
app.library = new app.LibraryView({ collection: mycollection });

---

您可以像以前一样收听收藏。

为什么不将

和

#addContact

放在一个公共容器中，并将该容器设置为您的视图

el

？试图绑定到

el

之外的东西很难闻，应该会让你重新考虑你的设计。但是我的

app.view

会为每个模型生成一行，需要放在表中。如果我按照你的建议做，行将添加到容器

el

的末尾，而不是表中。因此，除非有办法将模型绑定到

el

（我的例子中的表）中的特定位置，否则这不是解决方案。$（'table'）有什么问题。追加（…）以添加

s？没有人强迫你使用

这个。$el.append（…）

。这正是我想要的！我对这一切还不熟悉，我一定忘了我可以这样做。谢谢你的帮助：）