Heute ist mein erster Tag von backbone.js, also mach es mir hier leicht. Ich habe ein view, ein collection und ein model, die ein select füllen.
Ich kann die Geldstrafe select mit einem fest codierten array füllen. Ich verwende jedoch eine vorhandene API und muss zuerst die Antwort analysieren. Dies scheint auch in Ordnung zu funktionieren.
Was ich nicht weiß, ist, wer sagen soll, was geändert wurde, um meine neu zurückgegebenen Ergebnisse / Modelle zu rendern ... Der Code sollte sinnvoller sein, wenn das nicht hilft.
var UserGroup = Backbone.Model.extend();
var UserGroups = Backbone.Collection.extend({
initialize:function(){
this.fetch();
},
model: UserGroup,
url: "http://myAPI/getUserGroups",
parse: function(json){
return json["GetUserGroups"]["Results"];
}
});
var GroupSelectView = Backbone.View.extend({
el: $("select"),
initialize: function() {
var that = this;
this.collection = new UserGroups();
this.render();
},
render: function(){
_.each(this.collection.models, function(group){
$("<option/>", { value: group.get("Id"), text: group.get("Name")} ).appendTo(this.el)
}, this);
},
});
var groupSelectView = new GroupSelectView();
Was glaubst du? Bekomme ich es
3 Antworten
Um etwas flexibler zu sein, können Sie Ereignisse reset und add anhören.
Die Auflistung ist reset, wenn Sie sie vom Server (oder lokal) fetch, aber wenn Sie add Modelle oder fetch mit der Option add verwenden, ein Ereignis hinzufügen für jedes Modell wird stattdessen abgefeuert.
Das sollte funktionieren:
var GroupSelectView = Backbone.View.extend({
initialize: function() {
var that = this;
this.setElement($("select"));
this.collection = new UserGroups();
// listen to add and reset events but handle them differently
// fired on collection.add(model) and collection.fetch({add: true})
this.collection.on("add", this.renderItem, this);
// fired on collection.fetch()
this.collection.on("reset", this.render, this);
},
render: function(){
// backbone collections already come with some underscore methods built in
this.collection.each(this.renderItem, this);
},
renderItem: function(group) {
this.$el.append($("<option/>", {
value: group.get("Id"),
text: group.get("Name")})
);
}
});
Sie können Backbone.Events verwenden, um Änderungen zu veröffentlichen / zu abonnieren. Folgen Sie dem Link für weitere Informationen.
Modelle und Sammlungen verfügen über integrierte Ereignisse, die für häufig verwendete Anwendungsfälle ausgelöst werden, z. B. Attribute eines Modells, das geändert wird ('Änderung'), und Abrufen der Modelle einer Sammlung ('Zurücksetzen').
So lösen Sie eine Änderung aus (Veröffentlichen):
myObject.trigger ('event');
Um eine Änderung zu abonnieren (Abonnent)
myObject.on('event',myCallback,context);
Stellen Sie myCallback auf die Rendermethode Ihrer Ansicht ein.
Weitere Informationen zu Backbone-Ereignissen finden Sie in diesem Beitrag.
Sie könnten Folgendes tun ...
var GroupSelectView = Backbone.View.extend({
el: $("select"),
initialize: function() {
var that = this;
this.collection = new UserGroups();
this.collection.on( 'change', this.render, this );
// You could try this too, 1 is for 1 item is added, the other, when all items are changed
// this.postCollection.on('add', this.addOne, this);
// this.postCollection.on('reset', this.addAll, this);
this.render();
},
render: function(){
_.each(this.collection.models, function(group){
$("<option/>", { value: group.get("Id"), text: group.get("Name")} ).appendTo(this.el)
}, this);
},
});