9042

[code]

    - users.each do |user|
      .list
        .elem
          h2 = user.name
          time = user.created_at
          p = user.comment
    
[/code]

上記のようなテンプレート（slim）が以下のようなHTMLを出力します。  

[code]

      <div class="elem">
        <h2>Nagashima Koji</h2>
        <time>2014/02/23 17:14</time>
        <p>こんにちわ</p>
      </div>
    
      <div class="elem">
        <h2>Toyama Ippei</h2>
        <time>2014/02/23 17:16</time>
        <p>よろしく</p>
      </div>
    
    </div>
    
[/code]

現在リストには2つの要素が存在しますが、このリストの下にすぐフォームが設置してあり、そのフォームからJavascriptで動的に要素を追加できるようにした場合、slimのテンプレートをjsで使いまわすといったことはできるのでしょうか。

できなかった場合、jsに直接slimテンプレートと同じようなHTMLを記述する方法が考えられますが、少し気持ちが悪いので、もう少しマシな方法はありませんでしょうか。


CC BY-SA 3.0
2015-02-23T08:26:55.267
6958
2015-04-11T03:47:43.897
5840
question
ruby-on-rails
railsで利用しているHTMLテンプレートをJSで利用したい


Nested Formというgemの実装が参考になるかもしれません。

<https://github.com/ryanb/nested_form>

Nested Formには、親モデルのフォーム上で子モデルの入力欄を動的に追加できる機能があります。

参考: <http://www.fairwaytech.com/wp-
content/uploads/2013/02/Nested_Form_Edit_Ship_w_Pilots.png>

![画像の説明をここに入力](https://i.stack.imgur.com/H14lx.png)

技術的な詳しい説明は長くなるので省略しますが、ざっくり言うと予めhidden要素としてフォームのテンプレートを隠しておき、JSのイベントでそのフォームをコピー＆表示、しています。

一度自分でNested Formを動かしてみて、そこから実装方法を検討してみると良いのではないでしょうか？


CC BY-SA 3.0
2015-02-23T21:48:51.673
6984
2015-02-23T21:48:51.673
85
6958
answer


出来るかどうかだけで言えば出来ます。  
slimのテンプレートの構文を解析してhtmlに変換する処理が必要です。  
自力で実装する労力を考えると規模の小さいサイトでやるには疑問に思いますね。

構文解析してhtml化をするjsライブラリがあれば話は早いのですが、  
少し検索した程度では見つかりませんでした。

自力で実装しようとすると以下の処理が必要です。  
1 テンプレートファイルを文字列として取得。  
2 正規表現や文字列操作等を駆使して構造を解析。  
3 取得した構造をhtm(平文又はオブジェクト)に変換。  
4 document.createElementでHTMLelementを作ってフォームに追加

※サーバー側で既存の変換ツールを使ってhtmlを返す方が楽かもしれません。

javascriptのフォームを動的に追加する方法。

[code]

        var element = document.createElement('div'); 
        element.id = "div_id"; 
        element.innerHTML = "<"+"p>hogehoge<"+"/p>"; 
        var objForm = document.getElementsByTagName("form").item(0); 
        objForm.appendChild(element); 
        // form要素にdivエレメントを追加 
    
[/code]


CC BY-SA 3.0
2015-02-25T11:14:03.123
7079
2015-02-25T11:14:03.123
5479
6958
answer


> このリストの下にすぐフォームが設置してあり、そのフォームからJavascriptで動的に要素を追加

とありますが、フォームの内容をAjaxで送信してそのレスポンスを元に要素を追加するのでしょうか。あるいはサーバーには送らずに、フォームの内容をそのまま画面に表示するだけなのでしょうか。

後者であれば、他の方が回答されているように、JS側で要素を構築する必要があるとは思うのですが、 Ajax
を使うのであればサーバー側でHTMLにしたものを送り返してはいかがでしょうか。

`form_tag` の `remote: true` オプションを使うととても簡単にできそうです。

[Rails4で簡単Ajax - プログラムは、用いる言葉の選択で決まる](http://taka-
say.hateblo.jp/entry/2014/03/10/191857)

もし自力でやるならコントローラ内で `render_to_string` を使い、テンプレートをレンダリングしたものを文字列として取得し、 Ajax
のレスポンスとして返すことになるかと思います。

[RailsでAjaxでの更新時にはrender_to_stringが便利 - rochefort's
blog](http://rochefort.hatenablog.com/entry/20120116/p1)


CC BY-SA 3.0
2015-02-25T12:23:35.177
7080
2015-02-25T12:23:35.177
8000
6958
answer


knockout.jsを利用するという方法が、自分なりに良い解決策だと判断しました。


CC BY-SA 3.0
2015-04-11T03:47:43.897
9042
2015-04-11T03:47:43.897
5840
6958
answer