実践Backbone.Marionette ç¾å ´ã®æ‚©ã¿ã¨è§£æ±ºã¾ã§
3. 自己紹介 : 塚野 é¾é¦¬ (@lxyuma) â— ServerSide寄りWeb Developer â—‹ 元々SIer出身:java/rubyã§æ³•äººã‚µãƒ¼ãƒ“ス開発ã—ã¦ãŸ â—‹ 今ã¯ã€å¼Šç¤¾ã§CGMを開発 â—‹ 技術Skill ■言語FW：Rails + Backbone â– storage：MySQL + MongoDB â– ä»–rails周辺技術 ◠趣味 â—‹ æ—…è¡Œ/音楽/美味ã—ã„物食ã¹ã‚‹äº‹ â—‹ 去年ã¯å°æ¹¾ã¨Franceè¡Œã£ãŸ(今年ã¯å›½å†…å·¡ã‚ã†) â—‹ 2013å¹´ãƒãƒžã£ãŸã®ã¯ã€ã‚ã¾ã¡ã‚ƒã‚“ã¨å›é€†
04 | 8月 | 2013 | nacika.com
夜ã§ã™ã€‚今回ã¯ä½•ã‚’æ€ã£ãŸã®ã‹ã€backbone.jsã®å…¬å¼ãƒšãƒ¼ã‚¸ã‚’眺ã‚ã‚‹ã¨ã„ã†è¡Œç‚ºã«åŠã‚“ã§ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã¡ã‚‡ã£ã¨è¦‹ã¦ã¿ã‚‹ã¨ã€backbone.jsã®ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚°ãŒãªã‚“ã‹ä¾¿åˆ©ãã†ã˜ã‚ƒãªã„ã§ã™ã‹ã€‚pushState触らãªãã¦ã„ã„ã¨ã‹ï¼ ajax使ã†ã«ã¯ã‚‚ã†backboneã¯æ‰‹æ”¾ã›ãªã„å˜åœ¨ãªã‚“ã˜ã‚ƒãªã„ã§ã—ょã†ã‹ã€‚githubã¯é•ã†ãƒ—ラグイン使ã£ã¦ã„ã‚‹ã¿ãŸã„ã§ã™ãŒâ€¦ å…¬å¼ãƒšãƒ¼ã‚¸ã€‚backbone.jsã®é…布ページã¨ãƒžãƒ‹ãƒ¥ã‚¢ãƒ«ãƒšãƒ¼ã‚¸ãŒã²ã¨ã¤ã«ç¹‹ãŒã£ã¦ã„るタイプ。Ctrl+Fã§æ¤œç´¢ã—ã‚„ã™ã„ã®ã§ãªã‹ãªã‹ã„ã„ã‹ã‚‚。 IntroductionGoogle翻訳を使ã£ã¦Introductionã‚’èªã‚“ã§ã¿ã¾ã™ã€‚è¦ç´„ã™ã‚‹ã¨(確実ã«ç¿»è¨³ãƒŸã‚¹ãŒã‚ã‚Šã¾ã™) jQueryã‚’DOMを直接æ“作ã—ã¦HTMLã‚’å‹•çš„ã«å‹•ã‹ã™é–‹ç™ºã‚’ã—ã¦ã‚‹ã‚“ã§ã—ょã†ã‘ã©ã€å¤ã„よフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã¨ã‚µãƒ¼ãƒãƒ¼é–“ã§ãƒ‡ãƒ¼ã‚¿ã®å—ã‘渡ã—ã«å››è‹¦å…«è‹¦ã—ã¦ã‚‹Backb
Backboneã§ãƒ‡ãƒ¼ã‚¿ãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã‚’使ã£ã¦MVVMã‚’ã™ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ - Qiita
å‰æ 会社(Quipper)ã§ä»Šã‹ã‚‰ã“ã†ã„ã†é¢¨ã«ã—ãŸã„ã€ã¨å®£è¨€ã—ãŸç¤¾å†…ドã‚ュメントを公開ã™ã‚‹ã€‚ 枯れã¦ã‚‹ã‚ã‘ã§ã¯ãªã„。 coffeescript Backbone Backbone.stickit (データãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°) Chapling.js(ã¯ã€ã‚ªãƒžã‚±ãªã®ã§ã©ã†ã§ã‚‚ã„ã„ãŒã‚µãƒ³ãƒ—ルコードã¯ã“ã†) backbone.stickitã¯å®‰å¿ƒã¨ä¿¡é ¼ã®NYT製。(実質Backbone作ã£ã¦ã‚‹DocumentCloudã¨ä¸€ç·’ã®ã¨ã“ã‚?) backbone.stickit 目的 データãƒã‚¤ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ã‚’å…¨é¢çš„ã«ä½¿ã£ã¦å†æ画を最å°é™ã«ã—ã€ã‚³ãƒ¼ãƒ‰ã®è¦‹é€šã—をよãã—ãŸã„。 モデルã®å½¹å‰²ã‚’明示的ã«ã—ã€MVVMã‚’å°Žå…¥ã™ã‚‹ã€‚ ç†æƒ³çš„ãªAPI 擬似コード # ビューモデルã®å®šç¾© class TopicViewModel extends Model defaults: title: '' # ãŸã¶ã‚“ã“ã“ã§ãƒ‘ラメータå(
Backbone.coffee
Backbone.coffee gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.coffee is a port of Backbone.js written in CoffeeScript. It's fully compatible with Backbone.js (both coffee and
JavaScriptã®ãƒ‡ãƒãƒƒã‚° | 第4回 メモリリークã®ãƒ‡ãƒãƒƒã‚°
HTMLコーダーã€JavaScriptプãƒã‚°ãƒ©ãƒžã€PHPã€Perlã®ãƒ—ãƒã‚°ãƒ©ãƒžã¨ã„ã£ãŸè·å‹™ã‚’経験後ã€2010å¹´ã«æ ªå¼ä¼šç¤¾ãƒ”クセルグリッドã«å…¥ç¤¾ã€‚大è¦æ¨¡ã‚µã‚¤ãƒˆã®é‹ç”¨ã€é–‹ç™ºã®çµŒé¨“ã‚’æ´»ã‹ã—ã¦ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã‹ã‚‰ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã¾ã§å¹…広ã担当。2015å¹´ã€é€€ç¤¾ã€‚好ããªè¨€èªžã¯JavaScriptã¨Ruby。 著書ã«ã€ŽãƒŽãƒ³ãƒ—ãƒã‚°ãƒ©ãƒžã®ãŸã‚ã®JavaScriptã¯ã˜ã‚ã®ä¸€æ©ã€ï¼ˆå˜è‘—：技術評論社ã€2012å¹´11月7日）ãŒã‚ã‚Šã€å…±è‘—も多数。ã“ã®ã»ã‹ã€WEB+DB PRESSã€Software Designãªã©ã«ã‚‚寄稿。
[Backbone.js] イベント関連ã§èµ·ãã‚„ã™ã„メモリリーク
Backbone.jsを使ã£ã¦ã„ã¦èµ·ãã‚„ã™ã„å•é¡Œã£ã¦ã®ã‚’紹介ã—ã¦ãã‚Œã¦ã„る記事ãŒã‚ã£ãŸã€‚ ãã®ä¸ã§ã€é »ç¹ã«èµ·ãã¦ã—ã¾ã„ãã†ãªãƒ¡ãƒ¢ãƒªãƒªãƒ¼ã‚¯ã®å•é¡Œã€‚ onを使ã£ã¦viewå´ã§modelã®changeイベントをbindã—ã¦ã„ã‚‹ã¨ã€viewを削除ã—ãŸå¾Œã§ã‚‚イベント経由ã§modelã‹ã‚‰viewã¸ã®å‚ç…§ãŒæ®‹ã£ã¦ã—ã¾ã†ã‚‰ã—ãã€ãƒ¡ãƒ¢ãƒªãŒè§£æ”¾ã•ã‚Œãªã„。 var MyView = Backbone.View.extend({ initialize: function(){ this.model.on('change', this.render, this); }, render: function(){ //renderå‡¦ç† } }); viewã‚’removeã—ãŸéš›ã«è‡ªå‹•ã§å‚照を解除ã™ã‚‹ã«ã¯onã§ã¯ãªãlistenToã«å¤‰æ›´ã™ã‚‹ã¨ã‚ˆã„。 initialize: function() { this.listen
Testing Backbone applications with Jasmine and Sinon – Part 2: Models and Collections
Testing Backbone applications with Jasmine and Sinon Part 2: Models and Collections 25 March 2011 Overview This is the second in a series of articles demonstrating how to test a Backbone.js application, employing the Jasmine BDD test framework and the Sinon.JS spying, stubbing and mocking library. If you haven’t yet read the first part, take a look now. In this part, we’ll look at some examples fo
Testing Backbone applications with Jasmine and Sinon – Part 3: Routers and Views
Testing Backbone applications with Jasmine and Sinon Part 3: Routers and Views 26 April 2011 Overview This is the third and final part in a series of articles demonstrating how to test a Backbone.js application, employing the Jasmine BDD test framework and the Sinon.JS spying, stubbing and mocking library If you haven’t yet read the first or second parts, take a look now. In this final part, we’ll
Browser Unit Testing with Backbone Mocha Chai and RequireJS
index.html ��y jU ��s jU <html> <head> <meta charset="utf-8"/> <title>Backbone Tests</title> <link rel="stylesheet" href="libs/mocha.css"/> </head> <body> <div id="mocha"></div> <script data-main="SpecRunner.js" src="/app/libs/require.js"></script> </body> </html> model-tests.js p�� `um jU define(function(require) { var models = require('models'); describe('Models', function() { describe('Sample M
DailyJS: Backbone.js Tutorial: Updates for 1.0, Clear Complete
Part 1: Build Environment Part 2: Google's APIs and RequireJS Part 3: Authenticating with OAuth2 Part 4: Backbone.sync Part 5: List Views Part 6: Creating Lists Part 7: Editing Lists Part 8: Deleting Lists Part 9: Tasks Part 10: Oh No Not More Tasks Part 11: Spies, Stubs, and Mocks Part 12: Testing with Mocks Part 13: Routes Part 14: Customising the UI Part 15: Updates for 1.0, Clear Complete Prep
Avoiding Common Backbone.js Pitfalls | Eventual Consistency
With the rise of HTML5 and the huge advancement in Javascript performance and APIs in modern browsers, single page applications are now more popular than ever. With that, several open source frameworks and libraries were born to help us develop these somewhat complex applications. Backbone.js, while being one of the more popular choices, is also one of the smallest ones (in both terms of scope and
DailyJS: Backbone.js Tutorial: Routes
Part 1: Build Environment Part 2: Google's APIs and RequireJS Part 3: Authenticating with OAuth2 Part 4: Backbone.sync Part 5: List Views Part 6: Creating Lists Part 7: Editing Lists Part 8: Deleting Lists Part 9: Tasks Part 10: Oh No Not More Tasks Part 11: Spies, Stubs, and Mocks Part 12: Testing with Mocks Part 13: Routes Preparation Before starting this tutorial, you’ll need the following: ale
Backbone.jsã§ã¤ãã‚‹MVPãªUIパターンã€ãƒªã‚¹ãƒˆã€‘ | DevelopersIO
今回ã¯Backbone.jsを使ã£ã¦ãƒ•ã‚©ãƒ¼ãƒ ã‹ã‚‰è¿½åŠ ã—ã€å‰Šé™¤ã§ãるリストを作ã£ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚デザインã¯å‰å›žåŒæ§˜Twitter Bootstrapã§ä½œæˆã—ã¾ã—ãŸã€‚ htmlã¯ã“ã¡ã‚‰ï¼ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeholder="Please type something" /> <input type="submit" class="btn" value="Add" /> </div> </form> </div> <div class="list-items"> <ul> <li class="list-item" data-cid="c1"> <a href="#" class="close">×</a
Backbone.jsã§ã¤ãã‚‹MVPãªUIパターンã€ã‚¿ãƒ–】 | DevelopersIO
今回ã¯Backbone.jsを使ã£ã¦ã‚¿ãƒ–UIを作ã£ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚デザインã¯Twitter Bootstrapã‚’ã¤ã‹ã£ã¦ä»¥ä¸‹ã®ã‚ˆã†ã«ã—ã¾ã—ãŸã€‚ 世界的ã«å高ã„ä¼æ¥ã®åå‰ãŒä¸¦ã‚“ã§ã„ã¾ã™ã。 デザインã¯htmlを仮組ã¿ã—ã¦Bootstrapã§æ—¢ã«ã§ãã¦ã„ã‚‹ã“ã¨ã«ã—ã¾ã™ã€‚（本題ã¨é›¢ã‚Œã¦ã—ã¾ã†ã®ã§â€¦ã™ã¿ã¾ã›ã‚“＞＜） ボタンã®éƒ¨åˆ†ã« active ã¨ã„ã†ã‚¯ãƒ©ã‚¹ã‚’ã¤ã‘ã‚‹ã¨é¸æŠžä¸ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã«å¤‰ã‚り〠内容ã®éƒ¨åˆ†ã«ãŠãªã˜ã active ã¨ã„ã†ã‚¯ãƒ©ã‚¹ã‚’ã¤ã‘る㨠display: block; ã¨ãªã‚Šè¡¨ç¤ºã•ã‚Œã‚‹ä»•çµ„ã¿ã§ã™ã€‚ ã™ã¹ã¦activeãªçŠ¶æ…‹ ã™ã¹ã¦éžactiveãªçŠ¶æ…‹ htmlã¯ã“ã¡ã‚‰ã§ã™ <div id='ui-tab'> <ul class='nav nav-tabs'> <li class="active"> <a href="#apple">Apple</a> </li> <li> <a
Frontrend Vol.4 ãŠã¤ã‹ã‚Œã•ã¾ã§ã—ãŸï¼ˆjQuery to Backbone フォãƒãƒ¼ã‚¢ãƒƒãƒ—）
当日ã®ã‚¹ãƒ©ã‚¤ãƒ‰ã§ã”ã–ã„ã¾ã™ã€‚ 先月ã®ã¯ã˜ã‚ã”ã‚ã«ã‚¤ãƒ™ãƒ³ãƒˆå‘ŠçŸ¥ Frontrend Vol.4ã§å®£ä¼ã•ã›ã¦ã„ãŸã ã„ãŸã‚¤ãƒ™ãƒ³ãƒˆãŒå…ˆã€…週末ã«ç„¡äº‹ãŠã‚ã‚Šã¾ã—ãŸã€‚å¸æ•°ã«å¯¾ã—ã¦ã€éžå¸¸ã«å¤šæ•°ã®ï¼ˆ300/200人!!）ãŠç”³ã—è¾¼ã¿ã‚’ã„ãŸã ãã‚ã‚ŠãŒãŸã„é™ã‚Šã§ã™ã€‚ Frontrend Vol.4 powered by CyberAgent, Inc. セッション概è¦ãƒ»ã‚¹ãƒ©ã‚¤ãƒ‰ãƒ»ãƒ‡ãƒ¢ãªã©ã¯ã€â†‘ã®ã‚µã‚¤ãƒˆã«ã¾ã¨ã¾ã£ã¦ã„ã¾ã™ã€‚t32k++ 60分ãã“ãã“ã®ãƒ—レゼンã ã‘ã§ã€æ£ç¢ºãªæƒ…å ±ãŒä¼ã‚ã‚‹/ä¼ãˆã‚‰ã‚Œã‚‹ã¨ã¯ã‚ã‚“ã¾ã‚Šæ€ã£ã¦ã„ãªã„ã®ã§ã€ãƒ¯ãƒ¼ã‚¯ã‚·ãƒ§ãƒƒãƒ—ç³»ã§ã‚‚ãªã„é™ã‚Šã€Œèˆˆå‘³ã®å–šèµ·ã¨ç‹¬å¦ã®åŠ©ã‘ã€ã‚’モットーã«ã‚„ã£ã¦ãŠã‚Šã¾ã™ã€‚ãã®ã‚ˆã†ãªã”託をå«ã‚ã€ä»Šå›žã¯å…ˆæœˆã®CSS Nite LP26ã§Stylus推ã—ã—ãŸã¨ãã¨ã¯ã€ã¾ãŸè¶£ã®é•ã†ãµã£ã‹ã‘気味ãªæ§‹æˆã§ã”ã–ã„ã¾ã—ãŸã€‚ å‹•ç”»ã¨ãƒ‡ãƒ¢ãƒ•ã‚¡ã‚¤ãƒ« jQuery to Backbone from Fr
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
backbone.jsã§å–り扱ã‚れる2種類ã®ã‚¤ãƒ™ãƒ³ãƒˆã«ã¤ã„㦠| ミクマãƒã‚°
[JS] Backbone.Routerã‚’FSMã«ã™ã‚‹ã‚µãƒ シング | okame-log
backbone-jasmine – part 2 – testing routes | gregs
Testing AMD Backbone Modules
[Backbone.js] 自分ã§ä½œã£ãŸã‚¤ãƒ™ãƒ³ãƒˆã‚’Viewã¨Collection(ã¾ãŸã¯Model)ã§é€£æºã•ã›ãŸã„
{{#tags}}- {{label}}
{{/tags}}