Javascript 如何使用ember.js显示垂直堆叠的模板
使用ember.js，我希望将模板的内容显示为一个更大页面的各个部分，而不是让它们相互替换。您能否建议如何更改以下示例，以便将“关于”部分滚动到“简介”部分并显示在其下方。现在，点击“关于”链接只是将“简介”部分替换为“关于”，我想让它们一起显示在我的页面中。对不起，如果我错过了一些基本的东西。刚开始学习ember.js index.htmlJavascript 如何使用ember.js显示垂直堆叠的模板,javascript,ember.js,single-page-application,Javascript,Ember.js,Single Page Application,使用ember.js，我希望将模板的内容显示为一个更大页面的各个部分，而不是让它们相互替换。您能否建议如何更改以下示例，以便将“关于”部分滚动到“简介”部分并显示在其下方。现在，点击“关于”链接只是将“简介”部分替换为“关于”，我想让它们一起显示在我的页面中。对不起，如果我错过了一些基本的东西。刚开始学习ember.js index.html <html> <head> <meta charset="utf-8"> <link re
<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>
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(){
this.route('about');
}
);
body{
margin: 0 auto;
padding: 0;
}
nav {
border: 0 solid;
margin: 0 auto;
padding: 0;
width:100%;
height:100%;
}
我想在这种情况下你不需要出口
<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中吗
App.ApplicationController=Ember.Controller.extend（{actions:{focusOn:function（segment）{$（segment.scrollIntoView（）}}}）是，因为您的模板名称是application，所以我假设它是与application controller关联的hbs文件。你应该先试试你的解决方案，它会奏效的。还没有。我得到了由以下行生成的“Uncaught TypeError:undefined不是一个函数：$（段）。scrollIntoView（）}看看我的更新答案，之前我写了$（selector to you segment），假设您添加了正确的id并传入了正确的选择器。这不起作用。我将您的示例更改为使用document元素而不是路径作为scrollIntoView方法的对象，现在它可以完美地工作。非常感谢你的灵感！现在my:actions散列看起来像这样：actions:{focusOn:function（segment）{var el=document.getElementById（segment）；el.scrollIntoView（）；}
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()
}
}