marionettejs / backbone.marionette Goto Github PK

Your use of CompositeView in the first example of the article [1] produces ul tags around every li underneath a parent node of the tree, even if they are sibling elements. I don't know if this is a shortcoming of the library, or of the example.

[1] http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

Derick,

This is a question rather than an issue and I'd like your guidance please. I'm building an app that will have a navigation region which is essentially a main menu that will remain visible throughout the lifetime of the app. It will also have another "main" region that will contain a view dependant on the route selected. So far its just the same as BBCloneMail.

However some of the views that will be rendered in the "main" region are a little more complex and are logically made up of separate areas/views. One I can think of immediately is a view to manage "users" which might be a layout made up of a specific "users" menu and a list of users.

My first thought was to break the users view into a users layout region that contains the place holders for the 2 user views. Then call the show() method on the original main region to swap in the users layout region and in the onRender() of the users layout region instantiate the 2 user views and show them via the show() methods of the 2 user regions. Essentially nesting a region inside another view/region.

Is this the correct approach? what would you advise?

TIA,
SImon

Hi,

Beware n00b question! (I'm starting to learn about Backbone.js, and only started trying out Marionette yesterday...)

If you want to render a collection into a template, I think the "official" approach is to use a CompositeView as you've done here: http://jsfiddle.net/derickbailey/me4NK/

However, the readme indicates that a CompositeView is meant to be used when the view is intended to be both a branch and a leaf in a tree structure.

If I simply want to render a collection of items into (e.g.) a table (using a template), am I supposed to use a CompositeView ? I initially thought I could just use a CollectionView and define appendHtml to put the rendered ItemViews in the right place. (In other words, I though I could do the same thing as in the JSFiddle above, but replacing CompositeView with CollectionView.)

However, it seems you can't use a template with a CollectionView. Is this correct ? If yes, could you explain why it isn't possible to specify a template in a CollectionView ? (I'm just trying to get a better understanding the Marionette "philosophy", and when components should be used or not.)

Thanks !

a scenario came up with a client where we wanted to pass App.region as a param to an immediate function (module pattern) but couldn't, because App.region doesn't exist until App.start() is called.

Change Marionette so that regions are initialized inside of the call to App.addRegions instead of waiting for the start method to be called.

MyRouter = new Backbone.Marionette.extend({
  appRoutes: {
    "foo": "doFoo"
  }
});

new MyRouter({
  controller: fooController
});

var fooController = {
  doBar: function() { },

  doFoo: function(){
    this.doBar();
  }
}

this produced an error: undefined is not a function or something like that, because the doFoo controller method was called in the context of the router, not the controller.

http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-14

the "item:closed" event never gets handled because the call to view.prototype.close unbinds all of the handlers before this is triggered.

Right now there is no way to intercept the process of rendering each individual item in a collection view or composite view with a collection.

need a way to get access to the item itself as well as the view instance, and/or a way to create the view instance for the item, within a specific instance of a collection/composite view

for example, something like this:

Backbone.Marionette.CollectionView.extend({

  renderItem: function(item){
    var view = new MyView({ model: item });
    return view;
  }

});

I need to think through the specific scenarios that I ran in to with a client project recently, but I think something along these lines would be good.

For some boiler plate to add support for AMD, see https://github.com/umdjs/umd.

Hey Derick, thanks for this project. I wondered if it's possible to publish it to npm to make it easier for node users to update to new versions?

Thanks

Hi,

When I use Marionette.RegionManager, it warp my view in an extra div.
How could I avoid this ?

I am working on an application that has mini-apps and multiple page views in each of the mini apps. Ideally, I'd like to keep a "current" view of each mini-app so that a user could switch to a new mini-app and then come back to see the same state it was left in. Is this doable in the current project?

Working with Twitter BootStrap, and using a region manager to show modal dialogs. I had to write this code to make it work:

  var ModalManager = Backbone.Marionette.Region.extend({
    el: "#modal",

    constructor: function(){
      Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
      this.on("view:show", this.showModal, this);
    },

    showModal: function(view){
      this.$el.modal();
    }
  });

This works, but it could / should be done better. I would prefer to do this:

  var ModalManager = Backbone.Marionette.Region.extend({
    el: "#modal",

    onShow: function(view){
      this.$el.modal();
    }
  });

But even at that, the Region object needs to support an initialize method, which it currently doesn't support:

Backbone.Marionette.Region.extend({
  initialize: function(options){
    // init stuff goes here
  }
});

Someone with design and logo creation skills want to tackle this for me?

I can't offer any financial compensation, but I can certainly advertise your skills in front of thousands of people via the Marionette project page, twitter, Google+, and on LosTechies.com in the form of a blog post. :)

I like the onRender and onClose events, but sometimes I need to do some stuff before a render or before a close.

For example, I use jQuery Tipsy to show tooltips. Unfortunately, if I make a button that causes the view to immediately re-render, the tip stays in place because the HTML is separate from the view. I have to do this to work around:

render: ->
  @disableTipsy()
  super

I could put that in a beforeRender event or in a beforeClose event. Maybe only one makes sense but I think providing both is easy enough.

I could do this myself (and probably will locally) but I thought I'd throw it out there. If you want me to formally make a pull request and modify my fork, let me know, I will be gone this weekend.

I got this report from a Marionette user:

The first time a navigate to my #list route the list is rendered, but the the following times the "item:rendered" event is not fired. My solution to the problem was to implement the onShow function in the SubApp-layout and trigger an custom event there.
This is not a problem for me, it's probably something I would have done later anyway to let other layouts and "widgets" now about the change.

need to look in to this... why is the 'item:rendered' not firing twice? is the item view not being rendered the second time?

If a collection is sorted (http://documentcloud.github.com/backbone/#Collection-sort) then the "automagic" aspect of collections adding and removing items is not behaving correctly. In fact, it looks like it simply appends the itemview to the collection view unless you override the appendHtml function.

According to backbones documentation:

Likewise, if you're a callback listening to a collection's "add" event, options.index will tell you the index at which the model is being added to the collection.

I'm going to take some more time tomorrow to dig into marionetts automatic rendering to see how difficult of a change this would be to implement.

Reference to the documentation: http://derickbailey.github.com/backbone.marionette/#marionette-collectionview/collectionview-automatic-rendering

After upgrading to from 2.1 to 4.8, to get access to new CompositeView methods, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'on'

I see where the change was made, any ideas on what changes I would need to make in my implementation to resolve this.

bindTo: function (obj, eventName, callback, context) {
  context = context || this;
  obj.bind(eventName, callback, context);

  if (!this.bindings) this.bindings = [];

  this.bindings.push({ 
    obj: obj, 
    eventName: eventName, 
    callback: callback, 
    context: context 
  });
},

bindTo: function (obj, eventName, callback, context) {
  context = context || this;
  obj.on(eventName, callback, context);

  if (!this.bindings) this.bindings = [];

  this.bindings.push({ 
    obj: obj, 
    eventName: eventName, 
    callback: callback, 
    context: context 
  });
},

Any ideas?

Sometimes I have a model that contains a collection.

In this case I usually make a CompositeView and render it that way. Today I have to set this.collection in the initialize method.

It would be nicer if the collection/model could be a function instead.

In our project, and I'm guessing other's projects, the data may need to be fetched or otherwise not immediately available for return inside serializeData.

With render() moving to a deferred, I'm suggesting moving serializeData to a deferred (or whatever async implementation, like a callback) as well. And, while we're ripping this bandaid off, changing getTemplate to an async implementation too (in case an async call is needed to get the template).

The goal is for the entire render process to be asynchronous, from templates, to data, to the actual rendering.

If there's interest in this, I would be happy to implement the fix and send a pull request.

maybe its to late and i'm not reading well... but it seems to me that i have to override several function of ItemView to be able to use JST templates instead of jquery tmpl or underscore... am i wrong or i'm not getting it?
thanks in advance

pd: great work you made... when i first saw it a though "ahh, this is to much for what i'm doing now"... but as you said: application growed... and yet haven't tried, i found this library of great help

The promise returned by CollectionView#render() resolves immediately instead of waiting for the child-views to have finished rendering.
$.when() seems not to accept an array of promises (which it should in my oppinion). Instead one has to pass multiple promises as arguments.
The correct way to do it would be:
$.when.apply(this, promises).then(function(){}

Btw: Thanks for your work!! :)

When a collection is reset the Collection view should remove existing item views before rendering new views.

When using the RegionManager that shows/closes views, if using the same view and not creating a new one each time, once it gets closed, the close() function will un-bind all events on that view.
But when that view get's re-opened (via RegionManager.show() ), it doesn't rebind everything (i.e. delegateEvents() ), so now events not getting triggered.

Is your practice that a new View gets created each time it gets shown by the region manager? What if you want to keep views intact and just swap them out without re-creating each time? I could overwrite the view.close() function I guess to not unbind/remove ? Any suggestions?

Can you return this; at end of render() functions for your views. It's useful when calling render right after creating a new view and wanting to assign right away. It is how Backbone.View works. Thanks!

for composite branch/leaf setups (tree views, for example), the collectionview needs to support rendering a single item w/ a template, and then apend all the children of the collection to itself.

i'm thinking about creating something like a CompositeRegion that encapsulates rendering some HTML in to a screen and creating / holding on to region managers within that rendered HTML. I'm not sure if it should use a View to render the HTML, or if it should just encapsulate the rendering itself. I'm leaning toward encapsulating the rendering, itself, but using the same basic API as a view, so that it can be dropped in as a view replacement when needed. Something like this, maybe:

<script id="some-region-template" type="text/template">
  <section>
    <navigation id="menu-list"></navigation>
    <article id="main-content"></article>
  </section>
</script>

var CompReg = Backbone.Marionette.CompositeRegion.extend({
  template: "#some-region-template",

  regions: {
    menuRegion: "#menu-list",
    mainRegion: "#main-content"
  }
});

then you could create it and pass it to an existing region manager to show it, and use the composite region to show sub-views:

var compReg = new CompReg();
MyApp.contentRegion.show(compReg);

compReg.mainRegion.show(new SubApplicationContentView());
compReg.menuRegion.show(new SubApplicationMenuView());

I saw you added a CollectionView, which is kind of interesting, as I just wrote something similar for a yet unreleased project I'm working on.

The main difference is that in the one I wrote, the CollectionView tracks its collection's add, remove, and reset events and automatically updates the DOM accordingly. It would be pretty easy to extend your CollectionView to do the same.

Would you be interested in such a pull request?

Add AMD support (requirejs). Based on your code, it should be pretty painless.

Thanks!

This currently fails:

new Backbone.Marionette.RegionManager({
  el: "#foo"
});

need to allow this to work

I have very simple backbone model and collection. I have a corresponding backbone.marionette.CollectionView and backbone.marionette.ItemView and they live in a backbone.marionette.region.

The ItemView template contains a "remove" button. The click event of the remove button issues a model.destroy(). A HTTP DELETE is sent to the backend, buts it appears to be issued twice and because the second time it fails, the item is not removed from the collection.

Everything else is working fine, just the HTTP DELETE being issued twice. Any idea why?

I'm using version v0.4.5

The code is CoffeeScript, hope thats ok.

# Model:
class User extends Backbone.Model
  idAttribute: "_id"

# Collection
class Users extends Backbone.Collection
  model: app.User 
  url: "/someUrl/Users"

# CollectionView 
class UserListView extends Backbone.Marionette.CollectionView
  tagName: "ul",
  itemView: app.UserItemView

# ItemView
class UserItemView extends Backbone.Marionette.ItemView
  template: "#item"
  tagName: "li"

  events:
    "click .edit": "edit"
    "click .remove": "remove"

  remove: ->
    @model.destroy()

  edit: (e) ->
    alert JSON.stringify @model

When I upgraded, something started to break with using a CollectionView, and wondered if necessary.

You added:

    itemView: Marionette.ItemView,
    modelView: Marionette.ItemView,

to CollectionView. These don't help since you always will need to pass in your own view's for those elements - since you don't have a way to pass along a template to these, can never use them as is. And now an error is thrown when a template is not defined. In my CollectionView extension, I was checking to see if itemView was set via the options parameter, and if not then creating a default one. Now, I don't know if the ItemView was the one set by the hardcoded itemView: Marionette.ItemView (which doesn't help me) or if passed in via parameter, so I'm not sure whether I should leave it or create a default one. Make sense?

Since having it defined already doesn't help at all, my preference would be for them to not be defined by default.

Thoughts?

It would be great if a raw HTML string (say, '<div id="foo"><p>Hello</p></div>') could be passed to template for CollectionViews and ItemViews and as a parameter to TemplateManagers.get().

Example:

  var Item = Backbone.Marionette.ItemView.extend({
    template: '<div id="foo"><p>Hello</p></div>'
  });

Right now (as far as I know) you have to create a jQuery object with a wrapper element since .html() is called.

  var Item = Backbone.Marionette.ItemView.extend({
    template: function() {
      var wrapper = $('<div />');
      wrapper.append('<div id="foo"><p>Hello</p></div>');
      return wrapper;
    }
  });

Who would use this?

Anyone who gets raw HTML strings. I personally get the HTML as a string with require.js and the text plugin. Others may be getting the HTML from an ajax call.

Thanks!

I'd like to specify an itemView etc as a string.

Usually I have recursive imports so I can't control the order of the imports so it would help if eval could be run if it's a string.

see the BBCloneMail source

Another noob question perhaps!

So, my scenario is, I have a region which can contain 'n' collection views. Each collection view is associated with a collection ofcourse. And the collection view defines an ItemView which get created automatically when a model is added to the collection.

The region is tasked with switching between these CollectionView's. The ItemView that is inside is actually a simple div that is both draggable and resizeable. When the outer CollectionViews are switched, the ItemView eventually loses its interactivity.

When a region switches views, I know that it calls the View's onShow function ( also dispatches a "show" event). But does this onShow go all the way to the leaf views? Or is it just for the immediate view?

Would be great if you know the solution to this problem. Or any gyan gained from having faced this issue before! I will keep trying to resolve this issue.

A CollectionView forces you to create a Collection before hand and pass the collection as one of the options for the construction of the CollectionView. If a CollectionView is nested inside another CollectionView as shown in following example scenario :

LayerCollectionView contains a collection of layers.

DrawingAreaCollectionView contains a collection of Drawing Elements.

var layercolview = Backbone.CollectionView.extend({

...
...
itemView : DrawingAreaCollectionView,
...
...
...

});

It fails. To prevent this, one of the solutions would be to pass in a 'default collection class'. If a collection object is not passed in when the collection view is getting created, then the collection view can create a collection using the default collection class ( the same way as itemViews are created from the itemView class each time a model is added to a collectionView ).

I have done a fix for this in my own implementation but its slightly ugly for now.

There's a high likelihood that this will end up being extended directly off CollectionView and just add a few more methods to make it work as a composite. I think the separation is necessary, though, to help avoid confusion and to help clean up the code. There's an issue in the code comments, here:

mxriverlynn@1ebbe70#commitcomment-1021855

that needs to be addressed when the extraction happens. I put in a quick hack in my own app to work around this but a good solution needs to be found. I don't think i wnat to change the way the HTML is attached. rather, I want to avoid re-rendering the ModelView when the collection is reset.

the hack i mention is to add these two lines to the top of the renderModel method in Marionette's CollectionView:

  if (this.modelViewRendered) { return; }
  this.modelViewRendered = true;

This will prevent the model view from being re-rendered when the reRender method is called. There are likely some side effects / drawbacks to this approach, and a better solution needs to be found.

I'd like to see:
if(this.onRender){
this.onRender();
}

added to the render function in CollectionView, similar to how it is in ItemView. This would allow for a CollectionView to also contain its own rendering functionality in addition to it's ItemView's.

I am trying to make an app using Marionette. I had a region which is responsible for showing and hiding a view based on the route (Home, Details, Settings). Each of these views contains Marionette.CollectionViews, Marionette.ItemViews and basic Backbone.Views.

The main views show and hide fine and events work. But I can't get access to events on the CollectionViews or ItemViews. For instance, I want to show a "detail view" dialog when an ItemView is clicked. Even trying console.log statements doesn't work.

When not using a Region (using a BB.View with other views inside it), the events worked. However, with a Region, click events on the ItemViews don't work.

Am I missing something here? How do I get back the original functionality?

Hi Derick,

Great work, much appreciated. You a couple of minor issues with the docs discussing the template manager.

To overwrite the default loadTemplate there is a casing issue

loadtemplate => loadTemplate

Also in the loadTemplate method there is a context issue inside the callback. Need to take a ref to 'this' outside the get to be able to add to the templates array.

Create a scaffolding so people can create projects with backbone, marionette and jquery faster.

Hi Derick,

First, thanks for doing Backbone.Marionette -- it's a really nice system. I feel like I'm learning a lot by reading the code.

Second, of course :-), I have either messed up somehow or found a bug.

I'm using mustache.js for my templating engine, and some code that works with 0.7.0 fails with 0.7.1.

Here's a fiddle that fails: http://jsfiddle.net/CgmqW/4/

I see the following in the console when this runs:

initialize:after start
Entering renderTemplate
TypeError: 'undefined' is not a function (evaluating 'template.slice(i, i + openTag.length)') mustache.js:341

Any clues appreciated -- thanks!

I'm in the process of upgrading from 0.5 to 0.74 (amd version). I use Handlebars as my template engine. When using 0.5 I had this code (coffeeScript) to tell Marionette to use Handlebars as opposed to underscore to render my views.

  app.bind "initialize:before", (options) ->
    Backbone.Marionette.ItemView.prototype.renderTemplate =
        (template, data) -> Handlebars.compile($(template).html())(data) 

Now in 0.74 I think I should have this

  app.bind "initialize:before", (options) ->
    Backbone.Marionette.Renderer.renderTemplate =
        (template, data) -> Handlebars.compile(template.html())(data) 

But this causes cannot call method 'match' of null error to be thrown in the Handlebars next() function.

If I leave the original code:

  app.bind "initialize:before", (options) ->
    Backbone.Marionette.ItemView.prototype.renderTemplate =
        (template, data) -> Handlebars.compile($(template).html())(data) 

Then views render but they simply show the place holders {{place-holder}} rather than the view rendered properly with the appropriate data.

What do I need to do to make this work

I built a JSFiddle to show the changes that I've made to the CompositeView, and how it can now be used to build a recursive tree structure, fairly easily. I'd like to get some feedback on this, if anyone has time.

You can see the live demo running on JSFiddle, at: http://jsfiddle.net/derickbailey/AdWjU/

My goal was to create a recursive composite view that could be a self-contained tree-view. I fell just short of that goal, though, and I'm interested in getting feedback on whether or not what I've created is good enough. Hopefully someone will be able to see this and offer some advice on how to get past that one last hurdle, too. :)

The core of the example is this code:

// The recursive tree view
var TreeView = Backbone.Marionette.CompositeView.extend({
    template: "#node-template",

    tagName: "ul",

    initialize: function(){
        // grab the child collection from the parent model
        // so that we can render the collection as children
        // of this parent node
        this.collection = this.model.nodes;
    },

    appendHtml: function(collectionView, itemView){
        // ensure we nest the child list inside of 
        // the current list item
        collectionView.$("li:first").append(itemView.el);
    }
});

// The tree's root: a simple collection view that renders 
// a recursive tree structure for each item in the collection
var TreeRoot = Backbone.Marionette.CollectionView.extend({
    itemView: TreeView
});

This produces the nested <ul> structure that I expect, with one additional <div> surrounding the entire structure, generated by the TreeRoot collection view.

Why The TreeRoot Is Needed

The CompositeView itself is a recursive structure that follows the basic idea of the "composite pattern" from the GoF book. It's a structure where a node is both a leaf and a branch. With that idea, I set up the TreeView to render a template for the current node, and then for each item in the collection (which i called nodes in this case), render another TreeView instance.

When I originally put this sample together, I had a single parent level node for my data, with many child nodes:

treeData = {
  nodeName: "top of the tree",
  nodes: [{ ... }, {... }, {...}]
}

I was able to use a single TreeView definition to render this just fine, because the initializer for the tree view is explicitly setting the view's collection:

treeNode = new TreeNode(treeData);

new TreeView({
  model: treeNode;
});

This produced the self-contained tree view that I wanted. But when I switched the data to be a collection at the root, instead of a single node, it broke.

treeData = [
  [ nodeName: "top 1", nodes: [{...}, {...}, {...}],
  [ nodeName: "top 2", nodes: [{...}, {...}, {...}],
];

var treeNodes = new TreeNodeCollection(treeData);
new TreeView({
  collection: treeNodes
});

In this case, it broke immediately when instantiating the TreeView. The initializer for the TreeView is looking for this.model.nodes which throws an error because this.model is undefined. I've only defined a collection, not a model.

To try and work around this, I put a check in the initializer:

TreeView = Backbone.Marionette.CompositeView.extend({
  // ...

  initialize: function(){
    if (this.model){
      this.collection = this.model.nodes;
    }
  }
});

But that broke things for a different reason. I ended up with a top level TreeView instance that was trying to render a template with no model. This works fine if the template isn't expecting any data... but this template is expecting data, so that it can produce the <li> with the node's name as the display text. Since the template expects data, underscore.js templates throws an exception saying the "nodeName" is undefined.

The end result, then, is that I had to put a TreeRoot view in place. This is a simple collection view that does not render a template for the collection itself, but rather it just renders a template / view for each item in the collection. That way I could render the top level collection without a template, and then because I specified the itemView as the TreeView type, it would become a recursive tree structure from that point down.

The Remaining Problems

The problem that this solution introduced, though, is introducing the wrapper <div> around all of the tree structure (which can be configured via the tagName attribute, of course). Additionally, it fell short of my goal of having a self-contained structure. I now need two views to make this work with a collection, though the TreeRoot structure is obviously very simple.

What Do You Think?

Is the current solution good enough? Is there anything that I can do to fix the "problems" that I've stated? This is basically the last thing that's holding up the v0.7 release, but I want to make sure I get this as close to "perfect" as I can... I'll take "good enough" if I have to, but I want to see if there is something better.

I'd love to hear any and all constructive feedback on this - positive or negative. I'd love it even more if I could get some JSFiddle examples from other people, and/or pull requests to show how you would change this so that it can be a self-contained structure.

a client showed me some code to do sub-routes... routes that only match below a specified root. instead of:

someRoot/someResource/:id

we could do

someResource/:id

and specify a root: 'someRoot' in the configuration or initializer options for the router.

thinking about this for Marionette's app router.

Hi,

It's likely this weird behavior is due to my using Marionette (or Backbone) incorrectly, but here goes :

http://jsfiddle.net/davidsulc/966pG/4/

As you can see, the model I add after starting the application gets rendered twice within the CompositeView, but if you click on one of the "vote" buttons on the right, one of the duplicates gets removed and display is once a gain normal. Am I doing something wrong ?

Side question, shouldn't I be able to bind to the collection's "change" event to trigger the collection sorting ?

Hi Derick,
I have several different routers in my app. One option I started out using was to "namespace" each route with the area or router name or whatever so my route would be
"dashboard/dashboard": "dashboardView"
"registration/upgradesubscription/:assetName/:route": "upgradeSubscription"
"portfolio/_path/:entityId/:parentId": "portfolioViews",
however I found that the urls seemed to be rather verbose and redundant.
The issue is that the last route there
"portfolio/_path/:entityId/:parentId": "portfolioViews",
when you remove the "namespace"
"*path/:entityId/:parentId": "portfolioViews",
catches everything. which is fine as long as it's the last router loaded. but currently there doesn't seem to be an explicit way to ensure that. Although now that I think about it I could probably order how the different files are loaded. However, I'm about to just use the
.bind("initialize:after", function(){
event to load the last router.
My question is if this is something other people might be running into. if it's important to the infrastructure or just an artifact of the somewhat strange way I'm doing things.
Anyway, just thought I'd bring this up.
Thanks again for all your hard work.
Raif

Hi Derick, I need to add a regex to the appRoutes hash. Is there a clean way to do this using AppRouter, previously with Backbones Router I just did this.route <regex>,<name>,<callback>

as in http://documentcloud.github.com/backbone/#css(pre%3Anth-child(167))

Im trying to figure out how to put my regex into the AppRouter so that its processAppRoutes function can deal with it properly..

inside App.start(), can you add:

 initializer = _.bind(initializer,this);

before calling initializer(options); ??

I have a workaround to do this inside of an event on initialize:before, but would be nice if didn't have to worry about it and then could call this from within my initializers and reference the app.

I have some server side rendering to aid SEO/crawlability, but when I create region managers and add views to them - the html is replaced so i'm currently re-rendering the same content client side, which seems a little inefficient.

Is there a neat way of being able to attach a view to a region that already has content.