chaplinjs / chaplin-boilerplate-plain

Boilerplate application for the Chaplin.js library – written in plain JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unexpected behavior on module change

danielesalvatore opened this issue · comments

Good morning everyone,

first of all I would like to thank you all for this amazing project that I just found out and seems to be exactly what I am looking for.

Unfortunately I have an issue or I am missing something in the overall architecture: I added a new module to the example and i can not change to it properly.

What i would like to have:

A hello-world app where it is possible to switch between two module.

What i am using

Ubuntu 12.10
Apache2 installed by default
the project is placed within the 'chaplin-boilerplate' folder
the current repository code, just cloned.

How I modified the repo code

index.html
change configuration of new Application -> new Application({... root: '/chaplin-boilerplate/'})

routes.js
added the new route

return function(match) {
    match('', 'hello#show');
    match('test', 'test#show');
};

/controllers/test-controller.js
a copy of existing hello-controller.js but it uses a different model (models/test.js)

/models/test.js
a copy of the existing models/hello-world.js but with different default.message

/templates/site.hbs
In the fist UL i added

<li><a href="#/test">Test</a></li>
What is the problem?

If the href is set as '#/test' nothing changes in the page.
If the href is set as 'test' the message CHANGES, the URL changes in http://localhost/chaplin-boilerplate/test and if i refresh the page obviously i get a 404

I googled it around and I found out how to solve my issue:

My environment supports HTML5 pushState: this means the URL is completely rewritten, so no hash tag appears.
In order to make Chaplin works and prepare the environment correctly, it is possible to pick one of the following solutions, accordingly to the needs:

1 - Point all your webserver requests (except those which are for static files / your backend logic) to index.html.

2 - deactivate pushState during Application initialization

new Application({
...
pushState: false
});

That's right, either works.

Thanks for sharing your solution!