2010-06-07 3 views
4

Один из самых удобных вещей RJS является его способность оказывать частичный поэтому у вас есть весь ваш просмотр код в одном месте:Javascript шаблонного без RJS с JSON

# 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

Итак, для меня это похоже на то, что вы ищете, это клиентский механизм Javascript, который понимает ваш синтаксис шаблона RJS. Это точно? – Pointy

+0

, вы можете взглянуть на TrimPath – Dapeng

ответ

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

Усач (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 является родственным проектом, который также получает некоторую тягу, хотя реализация Рубина не кажутся такими же полными (http://yehudakatz.com/2010/09/09/announcing-handlebars-js/).

+0

Не думаю, что вопрос-искатель хочет полностью изменить свои текущие файлы шаблонов *. – Pointy

0

Что вы ищете, может быть JsonML или Pure, я нашел их давным-давно в нижней части страницы JSON.org, но я не пришел, чтобы проверить их сам.

Если вы используете их, сообщите мне, как это происходит.

Желаю вам удачи!

0

Для библиотеки-независим решение, вы можете посмотреть на Джона Resig в ​​(создатель JQuery) функцию микро-шаблонный на своем блоге:

http://ejohn.org/blog/javascript-micro-templating/

Не лучшую реализацию, но стоит читать.

Смежные вопросы