关于RJS最方便的一点是它能够渲染部分内容,因此您可以在一个地方拥有所有视图代码:
# task/index.html.erb
<ul id="task_list">
<%= render :partial => 'task', :collection => @tasks %>
</ul>
# task/_task.html.erb
<li>
<% if task.is_completed %>
<%= task.name %> - <%= task.completed_date %>
<% else %>
<%= task.name %> - UNCOMPLETED
<% end %>
...
</li>
现在我正试图摆脱RJS,让服务器以一个小的,格式很好的JSON而不是大量的JS + HTML进行响应。
有没有办法保持我的部分文件和代码没有重复,并且能够通过JS将新项目添加到任务列表而不使用RJS?我查看了一些javascript模板引擎,但它们都要求我维护一个单独的ruby部分和javacript模板。
答案 0 :(得分:8)
jQuery 1.4.3将包含tmpl插件(直接集成到jQuery中) 见http://api.jquery.com/jquery.tmpl/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
/* Compile the markup as a named template */
$.template( "movieTemplate", markup );
/* Render the template with the movies data and insert
the rendered HTML under the "movieList" element */
$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
</script>
</body>
</html>
答案 1 :(得分:0)
Mustache(http://mustache.github.com/)是一种超级简单的模板语言,没有任何逻辑。它在Javascript和Ruby中都有实现,因此可以在任一环境中呈现模板。
使用比RJS(或类似的模板语言)有点棘手。由于模板中没有逻辑,因此必须使用函数扩展JSON对象以提供更复杂的行为。
以下是一些示例标记:
<div id="person_image"><img src="{{avatar_url}}"></img></div>
<div class="info">
<div id="person_location">{{location}}</div>
<h2 class="name">{{name}}</h2>
<div id="person_positions">
<ul class="positions">
{{#positions}}
<li>{{company_name}} — {{title}}</li>
{{/positions}}
</ul>
</div>
<div id="person_social_links">
<div class="social-profiles research-links">
{{#links}}
<a href="{{url}}" class="branded" target="_blank" style="background-image:url(https://www.google.com/s2/favicons?domain={{name}})"></a>
{{/links}}
</div>
</div>
</div>
将呈现此对象:
{
"id":"4c0578d940cfd305ff00011c",
"name":"Steve Someguy",
"location":"Austin, Texas, United States",
"positions":[
{"title":"CEO", "company_name":"ACME, Inc.", "company_id":null},
{"title":"Director", "company_name":"Capsasin, Inc.", "company_id":"4c0578d940cfd305ff00011c"}
],
"links":[
{"name":"twitter.com","url":"http://twitter.com/spicyjs","image_url":"http://a3.twimg.com/profile_images/439463427/Picture_7_bigger.png"},
{"name":"twitter.com","url":"http://twitter.com/shadr","image_url":"http://a1.twimg.com/profile_images/20072132/me.jpg"},
{"name":"facebook.com","url":"http://facebook.com/shad.reynolds","image_url":"http://www.facebook.com/profile/pic.php?uid=AAAAAQAQm2JvEZLOpW8bCG-rToD8VQAAAAlFjZG9cIKwaX2wuA_Nspjn"}
]
}
Handlebars.js是一个相关项目,虽然Ruby实现似乎并不完整,但它也获得了一些牵引力(http://yehudakatz.com/2010/09/09/announcing-handlebars-js/)
答案 2 :(得分:0)
答案 3 :(得分:0)
对于独立于库的解决方案,您可能希望在他的博客上查看Jon Resig(jQuery的创建者)微模板功能:
http://ejohn.org/blog/javascript-micro-templating/
不是最好的实施,但值得一读。