如何顯示使用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