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

Question

使用ember.js，我想将模板的内容显示为一个较大页面的一部分，而不是让它们相互替换。 您能建议如何更改以下示例，以便“关于”部分可以滚动到“简介”部分并显示在下面。 现在，单击“关于”链接只需将“简介”部分替换为“关于”，我希望它们一起显示在我的页面中。 对不起，如果我错过基本的东西。 刚刚开始学习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%;
}

Answer 1

我认为您在这种情况下不需要插座。

 <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>

在您的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