1

I've created a site that has multiple panels that slide in from the right side of the screen.

I want to be able to put a link on each panel that will share my webpage, and when the user comes to the site, that specific panel will be open.

For example:

www.something.com/#/panel-1

Will show my page with panel-1 opened, while:

www.something.com/#/panel-2 will show my page with panel-2 opened.

What's the easiest way to do this? Can I use Ember,Angular, or Backbone's router and views with only simple html? Should I just use something like router.js?

Any help, advice, or links would be appreciated.

  • I suggest you pick a framework according to which you are most familiar with, since routes implementation are just a small bit of a web app. – Linial Nov 15 '14 at 00:22
  • @linial I'm pretty new to js frameworks, so I'm looking for one that is easy to get started with for this use case. It will be my first framework used on a client site. Do you have one you might suggest? –  Nov 15 '14 at 21:01
  • @Linial also, this is really the only feature of these frameworks that I need. –  Nov 15 '14 at 21:02
  • @coffeebytes Think prospectively. You don't need nothing more now but tomorrow? Who knows? If you find yourself in situation where you will have to implement something more, it's always good to have a framework that you don't need to fight with. – Mateusz Nowak Nov 15 '14 at 21:15

1 Answers1

0

Of course you can do that. That's the one of the strongest qualities of ember.js. After declaring your routes, framework can generate all the corresponding controllers and views automatically (it's called convention over configuration). See an example

Ember.Application.create({});
Ember.Router.map(function(){
    this.route('panel1');
    this.route('panel2');
});


<script type="text/x-handlebars">
    {{link-to 'index' 'index'}}
    {{link-to 'first panel' 'panel1'}}
    {{link-to 'second panel' 'panel2'}}

    <!--your panels will be inserted automatically in the outlet property-->
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="panel1">
  panel 1
  </script>
  <script type="text/x-handlebars" data-template-name="panel2">
  panel 2
  </script>

Demo: http://jsbin.com/dekixayuxa/1/

Mateusz Nowak
  • 4,021
  • 2
  • 25
  • 37
  • I've heard ember has a high learning curve, but you've made this demo seem easy! Let me play with this for a bit, then I shall likely accept your answer. –  Nov 15 '14 at 21:09
  • It's due to the fact that people tends to so over complicate things. There are things that you can code in ember without writing any JS. Do you believe? If not please check out docs. Good luck. – Mateusz Nowak Nov 15 '14 at 21:12