天下一クライアントサイドJS MV*フレームワーク武道会 (2014/07/11)のLTの資料です。
ͰΘ͔Δ.BSJPOFUUFKTͷ͍͍ͱ͜ΖఱԼҰΫϥΠΞϯταΠυ+4.7ϑϨʔϜϫʔΫಓձ !LPCB
View Slide
8IBUJT.BSJPOFUUFKT
8IBUJT.BSJPOFUUFKTw #BDLCPOFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫw େنΞϓϦέʔγϣϯʹ͑͏Δઃܭw 7JFXपΓͷศརͳ֦ுͳͲw ࠷ۙWʹͳͬͨ
8IZDIPPTF
8IZDIPPTF 4JOHMF1BHF"QQMJDBUJPOΛ࠷ॳ#BDLCPOFKT͚ͩͰ࣮ ωετͨ͠7JFXߏͷαϙʔτ͕ඞཁ ࣗྗͰ࣮ʜIt’s very similar to Marionette.js!!
͍͍ͱ͜Ζ
7JFXΛ͍͍ײ͡ʹߏԽͯ͘͠ΕΔ
4VQQPSU/FTUFE7JFXw #BDLCPOFKT͚ͩͩͱࣗͰ7JFXͷআ WJFXSFNPWF Λ͢Δඞཁ͕͋Δw .BSJPOFUUFKTͰ3FHJPOͱ3FHJPO.BOBHFS "QQMJDBUJPOͱ-BZPVU7JFX͕͍࣋ͬͯΔ͕7JFXͷΓସ͑࣌ͷॾʑΛͬͯ͘ΕΔvar app = new Marionette.Application();!app.addRegions({ main: "#main" });!!# render()͢Δඞཁͳ͍!!!app.main.show(new MyView());!app.main.show(new MyOtherView());ˠ;PNCJF7JFX͕࡞ΒΕʹ͍͘
7JFX.BOBHFNFOUApplicationLayoutViewItemViewCollectionViewItemView (in CollectionView)
7JFX.BOBHFNFOUvar TopView = Backbone.Marionette.LayoutView.extend({!template: template,!regions: {!artistSearch: “.js-artist-search",!topTracks: “.js-top-tracks"!},!onRender: function() {!this.artistSearch.show(!! ! new ArtistSearchView(model: new Artist())!);!!this.listenTo(tracks, 'reset', this.showTracks);!},!showTracks: function() {!this.topTracks.show(!new TracksView(collection: tracks)!);!}!});!!ɿ!ɿ!App.content.show(new TopView());!RegionΛఆٛೖྗΤϦΞΛදࣔcollection͕reset͞ΕͨΒۂҰཡͷCollectionViewΛදࣔApplicationͷRegionʹදࣔ
ओઓ+BWB4DSJQU
-PHJDMFTTUFNQMBUFw ֤$PNQPOFOUຖʹ7JFXΛ࡞ΔͨΊɺςϯϓϨʔτͰͷذΛ࠷খݶʹग़དྷΔw զʑςϯϓϨʔτ͕ແ๏ଳʹͳΔͷΛԿݟ͖ͯͨͣʜ
ಡΈ͍͢
:PVEPO`UOFFEUPHPPHMFw ͱͯಡΈ͍͢ίʔυͱͱͯಡΈ͍͢υΩϡϝϯτw ͕ͬͭΓ͓͏ͱ͢Δͱ݁ہ࣮ݟΔ͜ͱʹͳΔͷͰɺϑϨʔϜϫʔΫͷͰιʔε͕ಡΊͳ͍ͱπϥ͍w (PPHMFͷτϨϯυʁͦΕͬͯʜ
ͦͷଞ
.PSFw #FIBWJPSTʹΑΔ7JFXͷৼΔ͍ͷڞ௨Խw "QQMJDBUJPOͷ.PEVMFʹΑΔׂw ༷ʑͳλΠϛϯάͰͷΠϕϯτൃߦͱUSJHHFS.FUIPEw VJUSJHHFSTͳͲͪΐͬͱͨ͠ศརػೳ
·ͱΊ
4VNNBSZw #BDLCPOFKT͔ΒͷҠߦίετ͕͍w େنͳ4JOHMF1BHF"QQMJDBUJPOΛ࡞Δͷʹͱͯద͍ͯ͠Δw $PNQPOFOUࢦͰ7JFXΛׂग़དྷΔw ϩδοΫΛ+BWB4DSJQUଆʹدͤΔ͜ͱ͕ग़དྷΔ
.BLFZPVS#BDLCPOFBQQMJDBUJPOTEBODFspeakerdeck.com/koba04