I have a form which gets fields added dynamically when clicked on add field button. Now for that new field, i need to have a separate view as it has some functionality attached. I am aware that there is a concept of subviews.
My question is that when should i choose a subview over the view and should i in my case?
Firstly , check this fiddle i have created : here
This serves as an example for a separate view / sub view concept.
Now, building on the example and discussing the sub view vs single view option , if you see the example , i create a sub view for each link i add , by doing this :
var listItem = new printView({ model: model}); //create a new view
$('#list').append(listItem.render().el); //append that view to my main view
this helps me in a lot of ways :-
I have a view for each model
I can associate actions to each view and they take care of them individually
Modularity
If you go for single view approach , you face 1 problem upfront is , when i click or remove (any action which you define) on a particular element , how do i get which model is it ?
Solution for the above is , you can associate the cid with each element and when that element is clicked or removed (any action which you define) you can go a getByCid() to get the appropriate model.
Personally i would go with sub view or separate view approach since that gives a lot more flexibility and readability to your code.
Thank you.
Related
I have a view of entities which are being displayed based on an entity type filter. I now need to reorder these and would like to use the built in 2sxc functionality to do this, so I have a created a new view of the data using the "module data source" so that the ordering will work.
But how do I now make all of the existing entities of the same type (definition) appear in this new view? The view now displays one item by default and I can replace that one item. But how do I add multiple existing items? I need the Entity ID's to remain the same for Query String usage and SEO.
Thanks, hope the question makes sense.
Cheers
I believe that you are asking "how can I add many items to an instance (module) manually, so that I can also sort them manually" - is this correct?
If yes, then you must make sure your template supports lists (checkbox in the template settings). This then gives you a [+] button; but you don't want to use that, as it would be for typing in new data. There's another button called "add an empty demo entry" which you'll see as a round (+) after pressing the more ... button once. Pressing this will give you empty entries, into which you can then replace existing items.
How can I implement an editable view? For example, I have a PersonView. The default view will be showing the person info. Then when I double click, I want to enter "edit mode" where I can edit fields. I suppose you can imagine what I mean? Its common "pattern". How can I implement it? The "simple" way might be on dblClick I replace existing HTML with something else. But it doesnt seem right ... How can this be done?
you can achieve this in many ways:
swapping views,
inline editing,
swapping templates
here is a nice tutorial explaining what you need:
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-4/
You can add to your text fields some class, for example .disabled. Also you have to disable this fields by adding disabled attribute. Then add css rules to the .disabled class to make it like plain text (remove paddings, margins, borders etc.). Then on dblClick event just remove class and attribute.
Couldn't you just create another view for edit? since you're going to need different events separate inside of the edit view. Here is something I put together in jsfiddle
You can essentially create a new view passing the model that gets updated to the new view and show it in a region
newValue = ev.target.value;
this.model.set('contentPlacement', newValue)
mainView = new MainView({ model: this.model });
App.mainRegion.show(mainView)
http://jsfiddle.net/cLPfw/
On adding new model to my collection I don't want the view to be refreshed but I want the model to be appended to my collection and be appended to the view. SO i shouldn't render the view again. Is it possible via Backbone.js? How should I proceed ?
You could have a view that handles the whole layout, and a view that represents a single model. You would make the render method of the latter to return the HTML of a single model, and append the result to a list using the main view. You have a great example of this in the Addy Osmani's book "Developing Backbone.js applications". Take a look at the section where he explains how he renders each task to the todo list of his Todo App, if I understood well, your problem is solved in there.
I'm pretty new to Backbone and Marionette and am having a tough time getting my views to communicate.
I've got a composite view that displays a list of items. To add a new item to the list, I have a popup modal that opens in a new item view that is separate from the composite view.
I'm not sure that this is the best way to do this, but in the modal, I created a new instance of the collection with all of the items and added the new item to that collection. This new item shows up in the original composite view, but only after I refresh the page.
I can't seem to figure out how to get the composite view to listen for the add event and render the new model after it is added.
Am I on the right track here? If not, what should I be doing to add to a collection from a modal?
I think I got this figured out. Instead of creating a new collection in the modal view, I passed in the collection from the composite view as a parameter when I created the modal view. Now, when I add a new model in the modal, the 'add' event is automatically triggered on both versions of the collection and the view automatically renders the new model. No need to bind any extra events like I was thinking.
Your solution will work, but means your views are pretty tightly coupled. You might want to look into using events instead (see How do I send a model that was clicked on within a ItemView to another ItemView that is on the same page?)
How your functionality would work with events:
Within the modal, you enter the data for the model to create
When you press the "save" button,
you validate and save the model var myNewModel = ...
you trigger an event: MyApp.MySubApp.trigger("item:add", myNewModel)
In the controllerfor the list view, you listen to that event, and add the new model to the collection.
The handler code in your controller would look something like:
MyApp.MySubApp.on("item:add", function(model){
this.myCollection.add(model);
});
If you'd like to learn more about using events, check out 2 Marionette tutorials I wrote:
http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/
http://davidsulc.com/blog/2012/05/06/tutorial-a-full-backbone-marionette-application-part-1/
Both use events to communicate information within the apps.
In addition, basic events are also explained here: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
I have a view with nodes of the type 'Note' (custom CT). I have A view with comments that are associated with those nodes. How can I combine these views into one view so that I can filter them individually on the date ?
The simple way would be to make one view with notes and comments both in it and then using contextual filter to get the date.
Alternatively, to get them in a top wth notes and a bottom with comments, use attachment displays to get two views into one. Make your top view, then use 'Add+' where the page and block buttons are (top left) are to select a new 'attachment'. Make new view here then add the two together with 'Attachment Settings' then 'Attach to' and choose your first view. Magic!