I have a backbone collection of models.
MyCollection = Backbone.Collection.extend({
model: myMymodel;
});
MyModel = Backbone.Model.extend({
...
});
Each model has a view
myView = Backbone.View.extend({
initialize: function() {
this.model = new MyModel();
};
});
There is no persistence on the server-side. This is just for structuring client-side information. So the models do not have ids, and a url for Backbone.sync has not been configured.
From within the view, I want to remove the model from the collection.
I have tried the following:
this.model.trigger( "destroy" );
However it does not work. The destroy event is not propagating to the collection.
Any idea what I'm doing wrong?
Thanks,
I think you are not instantiating the collection at all. Cant make out that from the code at least. If you are just creating a model instance but not adding it to any collection, this.model.trigger("destroy"); will do nothing.
myView = Backbone.View.extend({
initialize: function() {
this.coll = new MyCollection();
this.model = new MyModel();
this.coll.add(this.model);
};
});
Now that the model is part of the collection:
this.model.destroy()
Makes a delete api call and gets removed from the collection
this.collection.remove(this.model)
Removes the model from the collection but does not make a delete api call.
this.model.trigger("destroy");
Triggers a destroy event on the model but does not destroy the model as such. sames as collection.remove(this.model) if model is part of the collection.
collection.remove(model) would be a more appropriate function to use since you're not persisting your models on the server-side. Backbone.Collection.remove
Related
So I'm looking into backboneJS and I'm trying to figure out when to use the collection attribute and when to use this.collection inside the initialize function? Is there a difference? Here is an example.
Backbone.View.extend({
collection: myCollection,
initialize: function(collectionData) {
this.collection = new app.Library(collectionData);
}
});
When you use "this" in a method of a object, it is set to the object the method called on. So this.collection will always equal to collection property (initialize method will be invoked by a view instance right?).
In my opinion, I always assign the default collection in view option declaration and access the collection reference by this.collection in the method of view object.
//set the default collection to a view object
var CustomView = Backbone.View.extend({
collection: myCollection
});
//or set collection when you instantitate a view
var myView = new CustomView({collection: myCollection});
//and get the reference of view's collection for event registering
initialize:function(){
//refresh view when new data is added to collection
this.listenTo(this.collection,"add",this.render);
}
The goal
Call UserModel within AuthenticationView with Backbone + Sprockets.
The problem
I just don't know a good way to do that.
The scenario
This is my view (assets/js/views/AuthenticationView.js):
var AuthenticationView = Backbone.View.extend({
el: $('.authentication-form'),
events: {
'keyup input[name=email]' : 'validationScope',
'keyup input[name=password]' : 'validationScope',
'submit form[data-remote=true]' : 'authenticate'
},
render: function() {
},
authenticate: function() {
// Here I'm going interact with the model.
}
});
And that's my model (assets/js/models/UserModel.js):
var UserModel = Backbone.Model.extend({
url: '/sessions'
});
The question
How can I make the interaction between the view and the model?
Remember: they're in separated files.
Getting the constructors together would be step 1 -- separate files don't matter, you can use Browserify/requirejs or just throw these things in global scope. From there, since passing an object into a view constructor with the property name 'model', automatically assigns the value to the view's this.model. So if we have an initialize method in our view, we can see:
initialize: function (options) {
console.log(this.model); // User instance
this.model.on('update', function () {});
}
And so we can pass in an instantiated model into the view via an object's model property:
var model = new UserModel();
var view = new AuthenticationView({ model: model });
http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/ here is great article about js modules lazy loading with examples used backbonejs and requirejs
I see many tutorials which don't follow the supposedly best practice of making a model, a view and collection for that model then a view for the collection. Which would be the parent view?
How do I make a view for a collection? Also, is it possible for it to keep track of when a model is added or deleted for it to update/re-render?
You must do something like this in your collection view:
var view = Backbone.View.extend({});
var myView = new view({'collection' : new collection});
To handle add/remove event, use this in your initialize function:
this.collection.on("add", this.onAdd, this);
this.collection.on("remove", this.onRemove, this);
and in your model view:
this.model.on("change", this.onUpdate,this);
See it here: http://www.neiker.com.ar/backbone/
(Sorry, I don't speak english)
EDIT: Just use marionette:
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md
I'm starting out with backbone and I'm trying to create a simple view that alerts whenever my model changes. Right now the initialize function in the view is being called, but the render function is not being called when my model changes (my model is being changed).
I've attempted two ways of binding to the change event (in the initialize function and the events property). I feel like I'm missing something obvious.
The #jsonPreview id exists in the html.
// Create the view
var JSONView = Backbone.View.extend({
initialize: function(){
this.bind("change", this.render);
},
render: function() {
alert("change");
},
events:
{
"change":"render"
}
});
// Create the view, and attach it to the model:
var json_view = new JSONView({ el: $("#jsonPreview"), model: documentModel });
Thanks in advance.
It looks like you are binding to the change event on the view rather than the view's model. think you need to bind to the model event something like this:
initialize: function(){
this.model.bind("change", this.render);
},
I have a Backbone collection model (with sub-models as elements)
and views to edit it.
I would like it that when the model is initially created, to "turn off"
sync, so the back end is never invoked until the user clicks on a
button, then I would like to "turn on" the sync, and invoke the save
method on the root model, in order to save it to the DB.
Once a model it saved, it should behave like a normal model.
The goal is to avoid saving until the user determines that he is happy with
what he has entered.
Backbone will initially look for a model's local sync function before going to Backbone.sync.
Backbone.js Documentation: The sync function may be overriden globally as Backbone.sync, or at a finer-grained level, by adding a sync function to a Backbone collection or to an individual model.
Therefore you can do this:
var MyModel = Backbone.Model.extend({
// New instances of this model will have a 'dud' sync function
sync: function () { return false; }
});
var MyView = Backbone.View.extend({
...
events : {
'click #my-button' : 'enableSync',
'click #my-save-button' : 'saveModel'
},
enableSync: function () {
// If this view's model is still pointing to our fake sync function,
// update it so that it references Backbone.sync going forward.
if (this.model.sync !== Backbone.sync) {
this.model.sync = Backbone.sync;
}
},
saveModel: function () {
// This won't actually do anything until we click '#my-button'
this.model.save();
}
...
});
var view = new MyView({ model: new MyModel() });