Marionette: Explained.
Nested Views in Backbone.Marionette. A couple of weeks ago we published an article about Functional Programming that used a bagel as an example. It was very well-received, so why not try again? This week @samccone is back with the delicious carbohydrate to talk about Nesting Views in Marionette.js. Nesting views can be a difficult task at first glance. Marionette makes your life easy with an elegant view layer that simplifies complexity and hides the implementation details. Suppose that we are tasked with creating an interface that covered the process of making a bagel sandwich.
Making a sandwich is pretty darn complex though. Let's assume that the output we need to generate looks looks like this. It might look like this (click through to see code example): Programmatically rendering this bagel according to our data seems like it will be a pain. The three pieces we will use are Let start out with a foil Region that will hold our bagel. Alright, so far, so good. Take a look at the finished product here. Like to write code?
Using Marionette to Display Modal Views. For a while, I’ve been thinking about how best to handle showing modal dialog boxes for my applications while utilizing Backbone views. A lot of interesting ideas passed through my head, but none of them seemed exactly right. Then I saw a post by Derick Bailey where he described how he uses Marionette’s Regions to handle the work. His post is a bit on the old side and Regions have changed a bit since, so I decided to look into how to do it myself. The Issues There are several issues surrounding creating modal dialogs just with a view. Along with that, we lose reusability. The Solution Now that we know we need to pull the modal functionality out of the views, it’s just a matter or figuring out where to put it. All we need to do is augment a Region to call the plugin’s method for showing the modal when the view is shown, make sure to hide the modal when the view is closed, and close the view when the modal is hidden.
There are a few things worth noting here: Now it’s simple to use: Conclusion. Using a controller to change content in a marionette.layout · marionettejs/backbone.marionette Wiki. A question was asked on IRC: The trick is to use an object that coordinates between all of the views and the layout. This is often referred to as a "mediator" - from the mediator pattern. Marionette provides aController type that fits this need perfectly. Use of the controller is simple enough, then: Part 2: Marionette Application, Modules and Controllers | blog.davebouwman.com. “Marionette Maps” is an on-going series on building a loosely coupled, configuration driven map viewer using Marionette.js. Read Part 1 TL;DR; Version This covers Marionette Application, Module, Controller, ItemView, CollectionView and a little on Events.
Code: github tagged v0.0.2 Demo: The Long Version… Working from the rough layout I created in the last post, the next thing to do is dive into the javascript. First, grab Marionette and it’s dependencies from MarionetteJs.com. Creating the Application The next thing we need is a Marionette Application. At this point the application is super simple as shown in this gist… As we develop the application we will setup more Regions – right now we just have the one region for the tools – and this is the container that will hold our tool items in the upper right.
The Navbar: Module + Controller The top bar of our app has a few things to manage. Ok, now we need to write some code to manage the Navbar. Events Code. A Visual Guide to Marionette.js Views | Art & Logic Blog. When I first began working on the front-end to this one interactive application, I decided to just write a few lines of JavaScript to handle some miscellaneous things behaviors on the front-end. However, that soon turned into a completely interactive front-end with thousands of lines of JavaScript trying to hack together the entire DOM. Luckily, Backbone.js came to the rescue which was later accompanied with Marionette.js. One of the difficulties I had with the documentation that existed was trying to visualize the handful of useful views Marionette.js provides. To help visualize the difference (and similarity) of layouts, regions, composites, collections, and item views, I’ve created helpful diagrams to visually demonstrate how the pieces of the puzzle fit together.
Layouts Useful when you need to nest multiple views inside of a container and occasionally need to swap them out with other views or show/hide them. Layouts are the top-level component in your application. Regions Item Views. Application — A Thorough Introduction To Backbone.Marionette (Part 1) RequireJS and Backbone View/Template loading | jsdude. I’ve been playing with RequireJS and Backbone while making some home projects for quite long time now, and here’s what I think about it: IT’S TOTALLY AWESOME! In this article I’m going to describe some ideas about how to build backbone-specific modules with RequireJS I don’t like a lot of things about millions of backbone tutorials out there. Especially when it comes to Views and templating – I really hate the idea of putting html templates inside script tags and then accessing this strings via jQuery.text() method.
So, I started looking for some good alternative for this method. RequireJS has some cool plugins available, one of them is require.text. Ok, here is how I did it. first of all, let’s define some simple folder structure (I use Python Flask Framework, so all my static files are in default static folder): I did not mention /models, /collections and other nifty folders inside the /js dir, only those, which make difference in scope of this article. Like this: Like Loading... Backbone.js object inheritance - @rjzaworski. If you’ve ever wondered if the basic classes in Backbone.js could be inherited by other, related objects, the answer is a resounding “Yes!” The very same extend method used to create models, views, and collections is just as useful for passing methods from any of those objects on to its children.
That’s good news, because it makes it ridiculously easy to share code between similar pieces of a Backbone application. An example’s worth at least a thousand words, so here’s a simple one: if animal is the base object and cat is the child, extend (predictably) will give the cat a voice. Instead of grunting incoherently, the new cat simply meows through the talk() method defined for all animals. The super function Children begin by loving their parents; as they grow older they judge them; sometimes, they forgive them(Oscar Wilde) Even the most judgmental of children may occasionally need to parent methods. Backbone.Model.prototype. By using . (new jabberwock). Oh, and you can play with an example here. How To: Detect Backbone Memory Leaks | Andrew Henderson. If you have a desire to create sophisticated client-side Web apps, Backbone.js is an awesome place to start. With client-side apps, a big area for concern is memory management. As front-end developers, memory management might not be something we’re all used to worrying about – however, when full page refreshes are few and far between, memory leaks can cause our app to come to a grinding halt.
In his article about zombie views, Derick Bailey did a nice job of explaining how Backbone views can remain in the JavaScript memory heap even after they are no longer part of the DOM. Using methods such as remove() and unbind() within a custom close method of our views will get the clean up process started, however, there are a few more things I recommend doing in order to safeguard against memory leaks. When you create a view in JavaScript, you’re creating DOM nodes and usually binding event listeners to them. When you remove these nodes from the DOM, their event listeners hold reference to them. Exploring Backbone: Part 1. Backbone.js is a framework that lets us structure our applications using a pattern similiar to MVC (technically Backbone is not pure MVC as the C stands for "Collection").
However, Backbone is a powerful system to use when creating apps that are beyond very basic. When passing & manipulating a lot of data, you should consider using something like Backbone. Since launching this blog I've had a lot of people ask me about Backbone. Although there are a lot of very good resources out there, I have struggled to get to grips with it myself and from the requests I've had I'd suggest a lot of others have too. So, I sat down to create a sample application with Backbone, and in this tutorial - which will span at least 3 parts - we will create a very simplified shopping cart application, with Backbone. As always the source will be on Github and is linked to at the end of this post. The first thing to do is set up our basic page and include our dependencies. <! You can see what will happen here. Exploring Backbone.js - Part 2. A while ago I kicked off a planned series of Backbone.js tutorials with Part 1, which introduced Backbone as we set up a "shopping cart" - albeit an overly simplified one.
Although it's been too long coming, today I've got part 2! I ended part 1 with some bullet points as things I wanted to cover: How do I add to a collection after initialising it? How can I show a filtered set of my objects? Whilst I wont be covering them all today, I want to take on the 1st and 3rd bullet point, as they go hand in hand. One thing that has become apparent is that in Backbone there a lot of different ways often to go about the same thing. We need to make some changes to our existing code base. Now, the way Backbone works in terms of events, is that you bind an event to an element using the form: This can be any element, however the element has to reside within the View's objects, which is all the elements in whatever you specified as el when declaring the view.
However, this seemed not very modular. Thomas Davis. Back to home Backbone.js Tutorial – by noob for noobs The official website describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives. I have decided to write a quick introduction for those trying to grasp the mechanics behind it. I am only a beginner also and would love suggestions and tips to improve my code. I am also very curious to hear what you think about how MVC ties into Javascript development and the most effective library you have used for logically organizing your Javascript. Would be great to get a discussion on MVC vs MVVM vs others etc leave comments at the bottom!
Also could you implement this example better in another framework? Understanding the Model View Controller Paradigm I have used many frameworks which promote that they use MVC. Getting started <! Setting up the main view. Backbone.js Tutorials.