如何显示使用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. 使用ember.js，我想将模板的内容显示为一个较大页面的一部分，而不是让它们相互替换。 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. 刚刚开始学习ember.js。

index.html 的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 的application.js

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

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

style.css style.css文件

body{
    margin: 0 auto;
    padding: 0;

}

nav {
    border: 0 solid;
    margin: 0 auto;
    padding: 0;
    width:100%;
    height:100%;
}

Answer 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: 在您的applicationController中，您将有一个动作来专注于特定部分：

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

}

如何显示使用ember.js垂直堆叠的模板

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-02 20:38:11

如何显示使用ember.js垂直堆叠的模板

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-02 20:38:11

解决方案1
1 已采纳 2014-04-02 20:38:11