How can I display templates vertically stacked using ember.js

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%;
}

Deewendra Shrestha · Accepted Answer · 2014-04-03T14:34:22.303

1

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()
    }

}

edited Apr 03 '14 at 14:34

answered Apr 02 '14 at 20:38

Deewendra Shrestha

2,313
1
23
53

This gives me both Intro and About as I wanted. Good! But I cannot figure out how to create actions: hash. Should I put it in ApplicationController? `App.ApplicationController = Ember.Controller.extend({ actions:{ focusOn: function(segment){ $(segment).scrollIntoView()}}});` – helcim Apr 03 '14 at 10:09
Yes, since your template name is application, I would assume that its the hbs file associated with application controller. You should have tried your solution first, it would have worked. – Deewendra Shrestha Apr 03 '14 at 11:44
Not yet. I'm getting "Uncaught TypeError: undefined is not a function" generated by this line: $(segment).scrollIntoView()} – helcim Apr 03 '14 at 12:19
Look at my updated answer, previously I had written $(selector to you segment), assuming you would add the proper id and pass in correct selector. – Deewendra Shrestha Apr 03 '14 at 14:36
This did not work. I changed your example to use document element instead of a path as the object of scrollIntoView method and now it works perfectly. Many thanks for the inspiration! Now my :actions hash looks like this: `actions:{focusOn: function(segment){var el = document.getElementById(segment);el.scrollIntoView();}` – helcim Apr 04 '14 at 06:39

How can I display templates vertically stacked using ember.js

1 Answers1