Skip to content

vmit/regions-extras

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Regions extras Build Status

Extra regions for marionette.

Install helper to system

npm install --save regions-extras

and now register in Handlebars

require('regions-extras').register({
    Handlebars: require('injectify/runtime'), // By default it will get Handlebars from window object
    Marionette: require('backbone.marionette'), // By default it will get Marionette from window object
    registerHelper: true // by default
});

Replace region

Allow you specify region as placeholder to replace with real view dom element.

For example we have this template:

<body>
    <div id="region"></div>
</body>

and this script:

var ReplaceRegion = require("regions-extras/region/ReplaceRegion"),
    region = new ReplaceRegion({
        el: "#region"
    });
    
region.show(new SomeList({
    tagName: 'ul'
));

the result wil be:

<body>
    <ul>
        <!-- some code that generate view -->
    </ul>
</body>

It is register in region manager as replace.

Async replace region

This region work like replace region, but it delay view render. Region expect implemented promise method in view, which return promise (jQuery.Deferred for example). View will be rendered when promise fulfilled.

var AsyncReplaceRegion = require("regions-extras/region/AsyncReplaceRegion");
var AsyncView = Backbone.View.extend({
    promise: function () {
        return this.model.fetch();
    }
});

var region = new AsyncReplaceRegion({
    el: "#region"
});
    
region.show(new SomeList({
    model: new User({id: 12})
));

It is register in region manager as async_replace.

Region helper

Handlebars helper, which mark place for region and inject it to Marionette.Layout that use it.

For example:

<div class="some">

    {{region "test"}}

</div>

and Layout:

require("region-extras");

var Layout = Marionette.Layout.extend({
     template: require("./tpl/template.hbs"),

     onRender: function () {
         this.test.show(new SomeView()); // region 'test' will be appeared here automatic
     }
 });

It is use replace region by default for now.

Additionally, region helper allow you override some useful options:

tagName

{{region tagName="ul"}} -> <ul id="region123"></ul>

regionClass

You can specify class of region to create

{{region "test" regionClass=YOUR_REGION_CLASS}}

regionType

It is like regionClass option, but use region manager to create region

in js

var manager = require('regions-extras/region/manager');
manager.addRegion('my_region', SomeRegionClass);

and in template

{{region "test" regionType="my_region"}}

If you require builtin regions (ReplaceRegion or AsyncReplaceRegion) we register it for you

{{region "test" regionType="replace"}} ## By default
{{region "test" regionType="async_replace"}}

async

This option is sugar for regionType option. It is append async_ prefix to regionType

{{region "test" async=true}}

is equal to

{{region "test" regionType="async_replace"}}

Changelog

V2.0.0

  • BC: API change. Helper register now looks like:
require('regions-extras').register({
    Handlebars: require('injectify/runtime'),
    Marionette: require('backbone.marionette')
});
  • BC: remove handlebars and marionette registry. Pass instances to register function
  • BC: remove replace-region file from root, use require('regions-extras/region/ReplaceRegion') instead

v1.1.0

  • BC: Async regions expect View.promise method. Early was then method.

v1.0.6

  • Auto load replace region to avoid BC

v1.0.5

  • Add region manager
  • Add async, regionType options
  • Add AsyncReplaceRegion

v1.0.4

  • Add regionClass option

v1.0.3

  • #4 Can't use region for second time
  • Karma + jasmine specs

v1.0.2

  • Pass view option through helper

v1.0.1

  • tag and tagName option to setup tagName

v1.0.0

  • Marionette 2.0

About

Extra regions for marionette.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.6%
  • Handlebars 0.4%