将普通页面 css 与 ember 车把 css 混合
Posted
技术标签:
【中文标题】将普通页面 css 与 ember 车把 css 混合【英文标题】：mixed normal page css with ember handlebar css 【发布时间】：2013-06-24 10:03:45 【问题描述】：html.erb 模板：
<div class="container">
<script type="text/x-handlebars" id="sentence">content</script>
</div>
但检查了萤火虫，它变成了
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
所以，问题是脚本不包含在容器属性中
【问题讨论】：
你打电话给Handlebars.compile(source); - handlebarsjs.com
你的容器 div 不应该进入视图的父模板吗？还是应用程序模板（如果它包含所有内容）？
【参考方案1】：
<body>
<script type="text/x-handlebars">
<div class="container">
outlet
</div>
</script>
<script type="text/x-handlebars" id="sentence">
content
</script>
</body>
没有id的模板是应用模板。
【讨论】：
不要对所有页面都使用把手 @Daniel，我不确定这是否可能。应用程序模板附加到应用程序容器（默认为主体），而不是内联呈现。【参考方案2】：application.html.erb
<div class="container" style="margin-top: 28px;">
<%= yield %>
</div>
index.html.erb
<script type="text/x-handlebars" id="sentence">content</script>
然后检查firebug，就变成了
<div class="container"></div>
<div id="ember299" class="ember-view">
blablabla.....
</div>
使用产量 ，而不是 outlet
【讨论】：
以上是关于将普通页面 css 与 ember 车把 css 混合的主要内容，如果未能解决你的问题，请参考以下文章
css Ember.js模型生成器 - 将JSON对象反向工程为Ember数据模型
ember.js + 车把：渲染 vs 出口 vs 局部 vs 视图 vs 控制