0
私はバックボーンには新しく、残りのAPIで使用するためにバックボーンプライマーを適合させています。私がリストビューに新しく追加されたアイテムを追加する最良の方法を見つけられないことを除いて、すべてがうまく機能します。ここに私のHTMLは次のとおりです。Backbone listviewにアイテムを追加するには
<div id="subscriberApp" class="row">
<div class="col-md-6">
<h2>Subscribers List</h2>
<table class="table">
<thead>
<tr>
<th>Login</th>
<th>Uri</th>
<th>Action</th>
</tr>
</thead>
<tbody class="subscribers-list"></tbody>
</table>
</div>
<div class="col-md-3">
<div>
<h2>Add a Subscriber</h2>
<p><label for="id_login">Login:</label> <input class="form-control" id="id_login" maxlength="100" name="login" style="display:block" type="text" /></p>
<p><label for="id_password">Password:</label> <input class="form-control" id="id_password" maxlength="100" name="password" style="display:block" type="text" /></p>
<p><label for="id_realm">Realm:</label> <input class="form-control" id="id_realm" maxlength="100" name="realm" style="display:block" type="text" /></p>
<p><label for="id_ip_address">Ip address:</label> <input class="form-control" id="id_ip_address" maxlength="100" name="ip_address" style="display:block" type="text" /></p>
<button class="btn btn-success create">Create</button>
</div>
</div>
</div>
<script type="text/template" id="subscribers-tmpl">
<td><span class="login"><%= login %></span></td>
<td><span class="uri"></span></td>
<td><button class="btn btn-warning edit-subscriber">Edit</button> <button class="btn btn-danger remove">Delete</button></td>
</script>
<script src="/static/subscribers/underscore.js"></script>
<script src="/static/subscribers/backbone.js"></script>
<script src="/static/subscribers/script.js"></script>
そして、ここでは私のバックボーンスクリプトです：
var subscribers_model = Backbone.Model.extend({
defaults: {
id: null,
login: null,
password: null,
realm: null,
hotspot_ip: null,
}
});
var subscribers_collection = Backbone.Collection.extend({
url: 'http://example.net/subscribers',
model: subscribers_model,
parse: function(data) {
return data;
}
});
var SubscriberView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#subscribers-tmpl').html()),
initialize: function() {
this.listenTo(this.model, 'destroy', this.remove)
},
render: function() {
var html = this.template(this.model.toJSON());
this.$el.html(html);
return this;
},
events: {
'click .remove': 'onRemove'
},
onRemove: function() {
this.model.destroy();
}
});
var SubscribersView = Backbone.View.extend({
el: '#subscriberApp',
initialize: function() {
this.listenTo(this.collection, 'sync', this.render);
},
render: function() {
var $list = this.$('.subscribers-list').empty();
this.collection.each(function(model) {
var item = new SubscriberView({model:model});
var uri = item.model.attributes.uri
item.model.attributes.id = uri.replace('/subscribers/', '');
$list.append(item.render().el);
}, this);
return this;
},
events: {
'click .create': 'onCreate'
},
onCreate: function() {
var self = this;
var $login = this.$('#id_login');
var $password = this.$('#id_password');
var $realm = this.$('#id_realm');
var $ip = this.$('#id_ip_address');
this.collection.create({
login: $login.val(),
password: $password.val(),
realm: $realm.val(),
hotspot_ip: $ip.val()
});
login: $login.val('');
password: $password.val('');
realm: $realm.val('');
hotspot_ip: $ip.val('');
}
});
var subscribers = new subscribers_collection();
var SubsView = new SubscribersView({collection: subscribers});
subscribers.fetch();
だから私は、主な問題は、私は私のすべての私のリソースを取得するとき、私はリソースIDのforeachを与えていますということだと思い応答で。個々のリソースを削除するのはこのリソースIDです。これは正しく動作します。 しかし、私が新しいリソースを作成すると、サーバー成功200レスポンスが返されるので、リソースが作成されますが、リストビューに別の行を追加することはできません。 誰かが解決策または別のアプローチを提案できれば、それは救命救助者になるでしょう。
乾杯