Backbone.jsとSASSでモジュールをつくった話
•Transferir como PPTX, PDF•
3 gostaram•704 visualizações
HTML5 minutes! 2014/09/26
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Backbone.jsとSASSでモジュールをつくった話
Semelhante a Backbone.jsとSASSでモジュールをつくった話 (20)
Backbone.jsとSASSでモジュールをつくった話
- 3. 前提条件 • JSはWebpackで結合する • commonJSで記述 • SASS/Compassを利用する(SCSS基本) • Ruby on Railsでアプリケーションに組み込む
- 4. モジュールの構成 • app/ • view/shared/_mod_slide-show.html.erb • index.html.erb • frontend_src/ • js/shared/_mod_slide-show.js • index.js • scss/shared/_mod_slide-show.scss • index.scss • public/ # いろいろ最終的に出力される
- 5. 組み込みイメージ • <!DOCTYOE html> • <html> • <body> • <h1>タイトル</h1> • <%= render partial: “/shared/mod_slide-show” %> • </body> • </html>
- 6. _mod_slide-show.html.erb • <section class=“mod_slide-show”> • <div class=“slide-container”> • <article class=“slide-item” /> • <article class=“slide-item” /> • <article class=“slide-item” /> • </div> • <nav class=“pagination” /> • </section>
- 7. _mod_slide-show.scss • .mod_slide-show { • position:relative; • .slide-container { • position:absolute; width:2000px; • /* left: 150px * n ; */ • } • .slide-item { • display: inline-block; margin-right:20px; width:150px; height:250; • } • .pagination { } • }
- 8. _mod_slide-show.js • var Backbone = require(‘backbone’); • module.exports = Backbone.View.extends({ • events: { }, • initialize: function () { • this.model = new Backbone.Model({ index: 0 }); • this.listenTo( this.model, ‘change:index’, this.render); • } • render: function () { • var index = this.model.get(‘index’); • var toLeft = index * ( 150 + 20 ); • this.$el.find( ‘.slide-container’ ).css({ left : toLeft }); • this.$el.find( ‘.pagination li a’ ).index(index).addClass(‘current’) • } • });
- 9. この構成のメリット • 構造的に対応関係にあるので見通しが良い • 特定のHTMLにスコープをしぼってJSモジュールをかける • SMACSSとかBEMと組み合わせやすい
- 10. 左右ボタンつけたい
- 11. _mod_slide-show.html.erb • <section class=“mod_slide-show”> • <div class=“slide-container”> • <article class=“slide-item” /> • <article class=“slide-item” /> • <article class=“slide-item” /> • </div> • <nav class=“pagination” > • <a class=“btnPrev”>前へ</a> • <a class=“btnNext”>次へ</a> • </nav> • </section>
- 12. _mod_slide-show.js • var Backbone = require(‘backbone’); • module.exports = Backbone.View.extends({ • events: { • ‘click .btnPrev’ ‘prev’, • ‘click .btnNext’ : ‘next’, • }, • // 中略 • next : function() { • var index = this.model.get(‘index’); • this.model.set(‘index’, index +1); • }, // prev 中略 • render: function () { • var index = this.model.get(‘index’); • // 中略 • } • });
- 13. 状態管理したい
- 14. _mod_slide-show.js • var Backbone = require(‘backbone’); • module.exports = Backbone.View.extends({ • // 中略 • render: function () { • var index = this.model.get(‘index’); • // 中略 • ( index <= 0) ? this.$el.find(‘.btnPrev’).hide() : this.$el.find(‘.btnPrev’).show(); • } • });
- 15. という感じです。