I want to call multiple composite view in single view plz help me.
var view = new applic({
collection: {collection1:CollectionList,collectionList2:CollectionList2},
model: new Model(data)
});
Related
I am developing a rich client application using Backbone.js and have encountered a situation where I need to fetch 3 values from three database tables and display them.
The rub, however, is that they are not part of my models and I have no need to synchronize them. They are for display purposes only. Should I created a child view which adds them to the DOM as part of the render() method? I'd prefer not to just hack some jQuery code together -but- it doesn't seem to fit nicely into my mental picture of Backbone models and views either.
The rule of thumb in MVCs like Backbone is that the data structure should always be stored in the model layer imo. In your case this could either mean extending your current models with those ui state related attributes (recommended) or create a new model and pass it to the views as an option:
var myModel = new MyModel();
var newModel = new NewModel();
var myView = new View({
model: myModel,
newModel: newModel
});
later in the view you can access to the newModel as this.options.newModel
I've the following backbone model.
var Credential = Backbone.Model.extend({
defaults: {
user: null,
password: null
}
});
I want to bind this model to a view.
Is it a best practice to instantiate the Credential model from the router and pass to the view
var loginView = new LoginView({ model: new Credential() });
or instantiate the model in the initialize method of the LoginView.
var LoginView = Backbone.View.extend({
initialize: function() {
this.model = new Credential();
}
});
The best practice is to assign a model to the view, an not let the view create the model.
Conceptually, a view is one representation of a model, when you can have multiple views representing the same model (for instance a form, and a list).
This is why keeping them loosely coupled and assigning a model to a view is usually a better pattern.
There is also one way you can follow. As you may know, backbone view share Controller task from MVC. So you may detach Controller responsibility from view in a independent abstraction, like it made in Marionette.js framework. It this case you will have workflow as following:
1) Controller is in charge of creating and delete views and models, models fetch, providing models to views.
2) Views listen to model events, DOM events and render actual model data
3) Model is only in charge of working with data
I'm not sure what the right approach here is. I am setting up a simple form. I need a couple of standard HTML input fields and a couple of select inputs. The data is coming from a couple of different sources and I would like to present the models and collections, with their data to the view like so:
Controller:
var registerView = new registrationView.RegistrationForm({
model: userModel,
model2: departmentCollection
});
myApp.SomeRegion.show(registerView);
Can I do this? Or do I need to split the form into separate regions, all with their own model or collection. If so, how do I call the model data in the template. I have not been able to make it work so far. I cannot find any examples of a form with mixed fields coming from different models and collections,
Many thanks
Wittner
You can do it using a composite view:
var registrationView.RegistrationForm = Marionette.CompositeView({
// ...
});
var my View = new registrationView.RegistrationForm({
model: userModel,
collection: departmentCollection
});
See https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md and https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md (a composite view inherits behavior from a collection view).
I'm trying to build an app that allows you to create items in a view in multiple places.
For instance, I can add a model from a collection when I create a new model in the parent collection.
The problem I'm having is, when I add the collection to the model and it iterates, it's adding the collection for each loop. So it ends up with LOTS of collections in the model that are repeated.
The parent model render has the following loop:
this.noteTasksViewAdding = new NoteTaskListViewAdding({ collection: tasks });
$('.note-tasks-list-all').append(this.noteTasksViewAdding.render().el);
this.collection.each(function(note){
var view = new NoteView({ model: note });
$('#items-list').prepend(view.render().el);
});
Then the model has the following render in it:
render: function() {
this.noteTasksViewAdding = new NoteTaskListViewAdding({ collection: tasks });
$('.note-tasks-list-all').append(this.noteTasksViewAdding.render().el);
this.$el.html(this.template(this.model.toJSON()));
return this;
}
What I want to have happen is that the collection is added to the model when it's rendered. I'm open to any suggestions on how to do this better.
Thanks!
I faced the problem as well. The solution is to clear the view before you set the collection. In your case, when you set parent view, you might do this:
$('.note-tasks-list-all').html(this.noteTasksViewAdding.render().el);
Then you can append your collection members.
I am new to Backbone.js and I have the following problem: I have multiple views that uses the same model. I do not want to re-fetch model on every view render, but I want to fetch it only once and then when view is rendered use that instance/data.
My example: I have 3 views for user. One is some user statistics, another user info and third user profile. After login user lands on user profile view and there I fetch the user model but how could I then pass this model reference around or even better how could I access that model data from different views?
I hope I am not doing any anti-pattern here. I have seen a lot of examples with binding events to model change and then rerender all the views but that is not my case. I am using backbone.js with require.js and underscore template engine.
Just return the instantiated model:
define(function (require) {
var MyModel = Backbone.Model.extend({})
return new MyModel()
});