4

RJS の最も便利な点の 1 つは、パーシャルをレンダリングできることです。これにより、すべてのビュー コードを 1 か所にまとめることができます。

# 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 から離れて、JS + HTML の巨大なチャンクではなく、適切にフォーマットされた小さな JSON でサーバーが応答するようにしようとしています。

部分的なファイルとコードを複製せずにそのまま維持し、 RJS を使用せずに JS を介してタスク リストに新しい項目を追加できる方法はありますか? 私はいくつかの JavaScript テンプレート エンジンを調べましたが、それらはすべて個別の ruby​​ パーシャルと javacript テンプレートを維持する必要があります。

4

4 に答える 4

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>
于 2010-10-14T09:17:59.907 に答える
0

あなたが検索するのはJsonMLまたはPureかもしれません.JSON.orgページの一番下でずっと前にそれらを見つけましたが、私はそれらを自分でテストするために来ていません.

もし使っているなら、その使い心地を教えてください。

がんばって！

于 2010-10-16T04:22:31.913 に答える
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/announce-handlebars-js/)。

于 2010-10-15T17:06:22.930 に答える
0

ライブラリに依存しないソリューションについては、Jon Resig (jQuery の作成者) のブログでマイクロ テンプレート関数を参照してください。

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

最良の実装ではありませんが、読む価値があります。

于 2010-10-19T22:30:09.870 に答える