BackboneJS, AngularJS無しで外部HTML読み込みするコード

どうも。

HTMLの一部を動的に書き換える方法としてはappendやbefore, ajaxなどといった手段があります。HTMLを動的に書き換えるのには、BackboneJSとAngularJSを使った書き換え方法もあります。でも新たにライブラリを習得するのも面倒なのでもっと簡単にやってしまいましょう。

---

概要

仮にRailsでやるとして、動的に書き換える置き換え後のHTMLを外部HTML(partial)として用意するだけ。たったそれだけ。

非常に単純。だからいい。

パターン1

コード

HTML

・メインHTML
<div id="target">
  <p>ここが書き換えられる</p>
</div">

・置き換え元HTML
仮にファイル名を_result.html.erbとします。
<div id="result">
  <p>ここが置き換え後</p>
</div">

JS

$(function() {
  $("#target").load("_result.html.erb");
});

置き換え後

<div id="target">
  <div id="result">
    <p>ここが置き換え後</p>
  </div">
</div">

load()ではファイル名を指定します。#resultの箇所がそのまま置き換えられるのではなく、読み込んだHTMLが該当する要素直下に配置されます。そのため#targetは消えません。

ファイル内の特定の箇所だけを読み込みたい場合は、引数をスペース区切りして2つ目に要素のセレクタを指定します。

 たとえば_result.html.erbの中のid="hoge"を読み込みたいなら、$("#target").load("_result.html.erb #hoge");という風にします。

パターン2

コード

HTML

・メインHTML
<div id="target">
</div">

・置き換え元HTML
仮にファイル名を_result.html.erbとします。
<div id="result">
  <p>ここが置き換え後</p>
</div">

JS

$(function() {
  $.ajax({
    url: 'new_html',
    type: 'get',
    data: ~~(なんか渡したい渡したいデータ),
    success: function(data) {
      if (data.html) {
        $('#target').html(data.html);
        // 1度だけ置き換えたいなら$('#target').replaceWith(data.html);とする。
      }
    }
  });
});

Rails

・controller
def new_html
  html = {}
  html[:html] = render_to_string(
  partial: 'result', locals': {
    # ここにpartialに渡す変数
  })
  render json: html.to_json
end

置き換え後

<div id="result">
  <p>ここが置き換え後</p>
</div">

こちらはrender_to_stringでpartialを読み込んでajaxで置き換えるパターンです。success時に.html()か.replaceWith()で置き換えることが出来ますが、元となる#targetは消え、新しい要素に置き換わります。イベント設定とか置き換え後HTML内に変数を利用する事を考慮すると、こちらのほうが使いやすいです。

以上、メチャクチャ簡単な例でした。