How can I display templates vertically stacked using ember.js

StackOverflow https://stackoverflow.com/questions/22812387

Question

Using ember.js I would like to display templates' contents as sections of one bigger page, rather than have them replace each other. Can you suggest how the following example should be changed so that "About" section could be scrolled to and displayed below the "Intro" section. Now clicking "About" link simply replaces the "Intro" section with "About" and I would like to have them both displayed together in my page. Sorry if I miss something basic. Just started learning ember.js.

index.html

 <html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/handlebars-1.0.0.js"></script>
    <script src="js/ember.js"></script>
    <script src="js/ember-data.js"></script>    
  </head>
  <script type="text/x-handlebars" data-template-name="application">
    <ul>
      <li><a href='#/'>Intro</a></li>
      <li><a href='#/about'>About</a></li>
    </ul>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="index">
    <nav>
      <h1>Intro</h1>
      <p>Some intro text</p>   
      <p></p> 
    </nav>
  </script>
  <script type="text/x-handlebars" data-template-name="about">
    <nav>
      <h1>About</h1>
      <p>About...</p>    
    </nav>
  </script>
  <script src="js/application.js"></script>
</html>

application.js

var App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function(){
    this.route('about');
}
);

style.css

body{
    margin: 0 auto;
    padding: 0;

}

nav {
    border: 0 solid;
    margin: 0 auto;
    padding: 0;
    width:100%;
    height:100%;
}
Was it helpful?

Solution

I think you would not need outlet in such case.

 <html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/handlebars-1.0.0.js"></script>
    <script src="js/ember.js"></script>
    <script src="js/ember-data.js"></script>    
  </head>
  <script type="text/x-handlebars" data-template-name="application">
    <ul>
      <li {{action "focusOn" "index"}}>Intro</li>
      <li {{action "focusOn" "about"}}>About</li>
    </ul>
    {{partial "index"}}
            {{partial "about"}}
  </script>
  <script type="text/x-handlebars" data-template-name="_index">
    <nav id="index">
      <h1>Intro</h1>
      <p>Some intro text</p>   
      <p></p> 
    </nav>
  </script>
  <script type="text/x-handlebars" data-template-name="_about">
    <nav id="about">
      <h1>About</h1>
      <p>About...</p>    
    </nav>
  </script>
  <script src="js/application.js"></script>
</html>

and in your applicationController you would have an action to bring focus on specific section:

actions:{
    focusOn: function(segment){
         //stole it from http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function
         $("#"+segment).scrollIntoView()
    }

}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top