regions-extras
Advanced tools
Extra regions for marionette.
npm install --save regions-extras
and now register in Handlebars
import 'regions-extras';
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/lib/ReplaceRegion');
var 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.
This region work like replace region, but it delay view render. Region expect implemented promise method in view, which
return promise (jQuery.Deferred or Promise for example). View will be rendered when promise fulfilled.
var AsyncReplaceRegion = require('regions-extras/lib/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 registered in region manager as async_replace.
Another way of working with the AsyncReplaceRegion is providing a custom promise to it.
After resolving a promise the AsyncReplaceRegion starts working the same as the ReplaceRegion.
var AsyncReplaceRegion = require('regions-extras/lib/AsyncReplaceRegion');
var region = new AsyncReplaceRegion({
el: '#region',
promise: function() {
return this.model.fetch();
}
});
region.show(MyCustomView);
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.View.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:
{{region tagName="ul"}} -> <ul id="region123"></ul>
You can specify class of region to create
{{region "test" regionClass=YOUR_REGION_CLASS}}
It is like regionClass option, but use region manager to create region
in js
var manager = require('regions-extras/lib/RegionManager').defaultManager;
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"}}
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"}}
This option is optional and is used for resolving async region to start showing views in it.
If not provided, the view.promise() method will be invoked instead every time you call the
region.show() method.
{{region "test" async=true promise=myCustomPromise}}
Promise internally instead of jQuery.Deferred_parent link to every view which attach to region, to unify method of parent search_parentView$el instead of el when possiblerequire('regions-extras').register({
Handlebars: require('injectify/runtime'),
Marionette: require('backbone.marionette')
});
require('regions-extras/region/ReplaceRegion') insteadView.promise method. Early was then method.async, regionType optionsAsyncReplaceRegionview option through helpertag and tagName option to setup tagNameFAQs
Extra regions for marionette
The npm package regions-extras receives a total of 24 weekly downloads. As such, regions-extras popularity was classified as not popular.
We found that regions-extras demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.