Skip to content

Commit

Permalink
Merge f9c76f7 into 66e7878
Browse files Browse the repository at this point in the history
  • Loading branch information
JuliusMorkunas committed Mar 21, 2019
2 parents 66e7878 + f9c76f7 commit f1bcb2e
Show file tree
Hide file tree
Showing 16 changed files with 1,226 additions and 505 deletions.
15 changes: 5 additions & 10 deletions README.md
Expand Up @@ -39,8 +39,6 @@ The simplest way to render React components in your Marionette layout. Inside, c

`render` - a function that returns a React node.

`mountPoint` - `'onRender'` or `'onShow'`, defines the point at which the render of the React node occurs. Default: `'onShow'`.

A more complicated example using Redux for state management and rendering a connected component:

```javascript
Expand All @@ -60,7 +58,7 @@ someRegion.show(view);
## ReactBehavior

```javascript
const View = Marionette.ItemView.extend({
const View = Marionette.View.extend({
template: false,
className: 'marionette-root',
behaviors() {
Expand All @@ -69,7 +67,6 @@ const View = Marionette.ItemView.extend({
behaviorClass: ReactBehavior,
containerEl: null,
render: () => <div className="react-component">Hello, React!</div>,
mountPoint: 'onRender'
}
};
}
Expand All @@ -90,18 +87,16 @@ This behavior gives you more flexibility when rendering a React node by providin

`render` - a function that returns a React node.

`mountPoint` - `'onRender'` or `'onShow'`, defines the point at which the render of the React node occurs. Default: `'onShow'`.

`containerEl` - a jQuery selector that identifies the element that should be used to render the react node. Similarly to the `ui` selectors in `Marionette.View`, this selector is scoped to the view which this behavior is applied to.

## MarionetteComponent

```javascript
const SimpleView = Marionette.ItemView.extend({
const SimpleView = Marionette.View.extend({
template({ name }) {
return `Hello, ${name}`;
},
templateHelpers() {
templateContext() {
return {
name: this.options.name
};
Expand Down Expand Up @@ -157,11 +152,11 @@ onUpdateOptions(view, viewOptions, nextViewOptions) {
Alternatively, `shouldViewRebuild` can be implemented inside the View to handle it's update requests:

```javascript
const SimpleView = Marionette.ItemView.extend({
const SimpleView = Marionette.View.extend({
template({ name }) {
return `Hello, ${name}`;
},
templateHelpers() {
templateContext() {
return {
name: this.options.name
};
Expand Down
124 changes: 65 additions & 59 deletions dist/index.cjs.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f1bcb2e

Please sign in to comment.