Skip to content
Browse files

refactor: clarify how logic files work and that you shouldn't touch .…

…view.js files
  • Loading branch information...
dariocravero committed Apr 24, 2019
1 parent 8f0b504 commit 7396119ba09ac577e412f787568fe386999797f8
Showing with 13 additions and 10 deletions.
  1. +12 −9 Logic/
  2. +1 −1
@@ -1,6 +1,10 @@
# .view.logic.js
# Custom logic

Any View file can be also wrapped with JavaScript logic to make a Smart View.
When Views Morpher runs morphs a `.view` file, it automatically creates `.view.js` file
next to it. While it might be tempting to edit that file and add your own logic,
you will find that Views Morpher will override your changes every time it runs!

So, how do you add your own custom logic to a `.view` file? With a `.view.logic.js` file.

With `Counter.view` file like:

@@ -37,13 +41,12 @@ will actually be using the `Counter.view.logic.js` instead.
This is where you would add any intermediate state to your views or connect them
to an external store of data.

## Control global state

Here's the video to the session that shows how to manage global state:

[![Control global state session](../images/ControlGlobalState.png)](
*It's important to note that logic files are expected to import the `.view.js` file
and export a new component that adds extra logic to it.*

Here's the link to the [repo shown in the video](
When you have a logic file for a view, Views Morpher will automatically import that file
instead of the raw view. Eg, say you have a `Button.view` and add a `Button.view.logic.js`.
When you use `Button` in another view like `App`, the logic file would be imported instead.

## Example on showing a list data coming from a service

@@ -93,4 +96,4 @@ Views Morpher will recognise the logic file automatically for you and use that i
In Views Tools you will see three elements rendered on the list with placeholder data on it so you can design it.

Reach out with questions via Github Issues [Github Issues](
Mention `@tombrewsviews` or `@dariocravero` to make sure that we get your notifications.
Mention `@tombrewsviews` or `@dariocravero` to make sure that we get your notifications.
@@ -70,7 +70,7 @@ Reduce the cost of design iterations.</br>
Control states of blocks</br>
Control when blocks are rendered</br>
6. [Animate scopes](Animations/
7. [Keep logic ](Logic/
8. [Custom logic](Logic/
9. [Integrate React components](ReactComponents/
Google Map example</br>
Loaders example</br>

0 comments on commit 7396119

Please sign in to comment.
You can’t perform that action at this time.