みつきんのメモ

組み込みエンジニアです。Interface誌で「Yocto Projectではじめる 組み込みLinux開発入門」連載中

Flask-BootstrapでjQuery

これらの続き

Webアプリケーションでボタン操作などちょっと格好いいことをしようとするとjQueryは外せない。

じつは、Flask-Bootstrapで基本となっているbootstrap/base.htmlは次のようになっており、jQueryCDNを読み込むようになっている。

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
...(snip)...

    {% block scripts %}
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}

なので、これを参照するflask-bootstrapのhtmlではscriptsブロックを拡張することで、jQueryの機能が使用できる。

前回作成したbootstrap.htmlを次のように修正するだけで、jQueryでボタンのイベントを処理できる。

contentブロックに<button id="btn">Button</button>の行でボタンを追加し、scriptsブロックでclickの処理を行っている。

{% extends "bootstrap/base.html" %}

{% block title %}Hello{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
    <h1>Hello World!</h1>
    <button id="btn">Button</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
$(function() {
  $('#btn').click(function(e) {
    $(this).text("Clicked");
  });
});
</script>
{% endblock  %}

これで「Button」ボタンをクリックすると、文字列が「Clicked」に変化する。

{{super()}}を忘れると、せっかく読み込んだCDNの設定が上書きされてしまい、 意図したように動作しないので注意。