Skip to content

Instantly share code, notes, and snippets.

@koba04
Last active August 29, 2015 14:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save koba04/c375231f871a6cd1a42c to your computer and use it in GitHub Desktop.
Save koba04/c375231f871a6cd1a42c to your computer and use it in GitHub Desktop.
marionette.js 2.0 release note (translate in japanese)

Original

https://github.com/marionettejs/backbone.marionette/releases/tag/v2.0.0

The Changes:

General

  • API change: Marionette.$.proxyは削除されたので代わりにBackbone.$_を使いましょう。

  • API change: APIの中にあったtypeという表記はclassに置き換えられました。

  • regionType => regionClass

  • ChildViewType => ChildViewClass

  • triggerMethodはイベントが発行される前に呼ばれるようになりました。

    • renderというイベントが発行されたときに、以前はrenderイベントが呼ばれた後にonRenderメソッドが呼ばれていましたが、これが反対になって、onRenderメソッドが呼ばれた後にrenderイベントが発行されるようになりました。
  • jQuery(Backbone.$)のDeferredを使っていたところがMarionette.Deferredが追加されて、それを呼ぶようになりました。

  • Marionette.DeferredにはBackbone.$.Deferredが代入されています。

  • JSHintのルールがより一貫性のあるものになりました。

  • Marionette.VERSIONのプロパティが追加されました。

  • ほとんどのクラスがgetOptionをインスタンスメソッドとして持つようになりました。Marionette.proxyGetOptionという新しいhelper関数が使われています。

    • ちなみに以前はMarionette.getOption(this, ...)をこのようにthisを渡して直接使用していました。
  • ほとんどのクラスがbindEntityEventsをインスタンスメソッドとして持つようになりました。Marionette.proxyBindEntityEventsという新しいhelper関数が使われています。

  • ほとんどのクラスがunbindEntityEventsをインスタンスメソッドとして持つようになりました。Marionette.proxyUnbindEntityEventsという新しいhelper関数が使われています。

  • 含まれるMarionetteのビルドは2種類だけになりました。両方共UMDです。1つはMarionetteのcoreだけが含まれているバージョンで、もう1つはWreqrやBabysitterが含まれたバージョンです。

Applications and Modules

  • API change: Moduleのinitializeの引数の順番がconstructorと一貫性を持つように変更されました。

  • this.options, moduleName, appだったのがmoduleName, app, optionsになっています(constructorも後者の順番)。

  • API change: Applicationのinitialize時のtriggerMethodsstartに変更されました。もう少し説明すると、initialize:before initialize:afterbefore:startstartになりました。単に名前が変更されただけです。

  • Applicationのメッセージングのシステムが"global"というチャンネル名を持ったものに変更されました。

  • こちらはBackbone.Wreqrに追加されたChannelの仕組みを使っています。

  • Applicationにbefore:region:addbefore:region:removeという2つのtriggerMethodが追加されました。

  • それぞれaddRegionremoveRegionの時に呼ばれます。

Controllers

  • API change: stopListeningdestroytriggerMethodの後に呼ばれるようになりました。

  • 以前はtriggerMethod(close)の前に呼ばれていました。

  • API change: closeメソッドがdestroyに変更されました。これはインスタンスを破棄したあとに再利用すべきでないことを強調するためです。

  • before:destroyのtriggerMethodが追加されました。それによってControllerが破棄される前にonBeforeDestroyで処理を差し込めるようになりました。

Behaviors

  • BehaivorでbehaviorsとしてBehaviroをまとめてることが出来るようになりました。Viewに定義するbehavirosのようなものです。
var Input = Marionette.Behavior.extend({
  behaviors: {
    Modal: {},
    FormValidation: {},
    KeyBinding: {}
  }
});

Regions

  • API change: showするときに存在しないelが指定されたときは例外を投げるようになりました。

  • 以前はただ何も起きないだけでした。

  • RegionのensureEl_ensureElementに変更されました。

  • API change: Regionでもregion.elregion.$elがViewのように参照出来るようになりました。

  • この変更のため、もしregion.elが文字列のセレクタであることに依存したコードを書いている場合は、region.$el.selectorを使うように更新する必要があります。

  • API change: openメソッドはattachHtmlに変更されました。

  • API change: closeメソッドはemptyに変更されました。これはViewのcloseメソッドとは完全に異なるので。

  • Regionはコンテンツをクリアするときにthis.$el.empty()ではなくて.innerHtmlを使うようになりました。

  • region.showがviewのrenderのようにthisを返すようになりました。

  • before

this.$el.empty().append(view.el); 
  • after
this.el.innerHTML='';
this.el.appendChild(view.el);
  • Regionに新しい2つのtriggerイベントが追加されました。before:swapswapで別のViewをshowする際に呼ばれます。

  • RegionのelにDOM node、DOM string selector、Jquery selectorが指定出来るようになりました。Viewのように。

  • すでに表示しているviewを再度showした時に、以前はrerenderされていましたが何もしなくなりました。強制的にrerenderさせたい時はforceShow: trueregion.showのオプションとして渡してください。

MyApp.mainRegion.show(myView, {forceShow: true});
  • Regions now fire a new triggerMethod, before:destroy, before they are destroyed

  • ???before:destoryなんてRegionにはない気がする....

  • before:emptyの新しいtriggerMethodが追加されました。

RegionManagers

  • getRegions: RegionManagerが持っている全てのregionを配列で返します。LayoutViewやApplicationでももちろん使えます。

Views

  • API change: LayoutはLayoutViewになりました。

  • API change: closeメソッドがdestroyに変更されました。closeだと再度openすることが出来るのではないかと混乱させてしまうためです。 destroyだと一度破棄するともう再利用出来ないことが明確です。

  • API change: onBeforeCloseでfalseを返してもviewを閉じるのをキョンセル出来なくなりました。この振る舞いはMarionetteの他の部分と一貫性がなくて、全ての場合でこの挙動にしようとするととてもたくさんのロジックを書く必要があります。falseを返す代わりにdestoryが呼ばれる前にハンドリングしてください。

  • API change: appendHtmlattachHtmlに変更されました。appendBufferattachBufferに変更されました。

  • API change: 重複していたり一貫性のないitemViewのイベントは削除されました。この変更で失うものはなくて、prefixのついていないイベント代わりに使うことが出来ます。例えばitem:before:renderの代わりにbefore:renderを使うことが出来ます。

削除されたイベントの一覧(多分)

  • item:before:render

  • item:rendered

  • itemview:item:before:render

  • itemview:item:rendered

  • itemview:item:before:close

  • itemview:item:closed

  • item:before:destroy

  • item:destroyed

  • API change: childEventsのcallbackで第一引数にイベント名を受け取らなくなりました。その他のtriggerのcallbackとの一貫性を撮るためです。

  • API change: CollectionViewの各ViewはitemViewからchildViewに変更されました。これはitemViewと混乱させないためです。全てのitemViewを参照していたCollectionViewのメソッドはchildViewを参照するようになっています。例えばgetItemViewgetChildViewになりました。CompositeViewもCollectionViewを継承しているので同様です。

  • API change: CollectionViewとCompositeViewにあったaddChildView_onCollectionAddになってremoveItemView_onCollectionRemoveになりました。

  • API change: CompositeViewのrenderModel_renderRootになりました。

  • API change: CollectionViewとCompositeViewのonChildRemove_onCollectionRemoveになりました。

  • Bug fix: eventsのハッシュの中でuiが補完されなかった問題が解決しました。

  • Bug fix: delegateEventsを読んで動的にuiを追加してそれをeventsのハッシュで使った場合でも上手く動作するようになりました。

  • HTMLをDOMに追加するときにattachElContentをオーバーライドすることで一般的ではない最適化も出来るようになりました。これはItemView、LayoutView、CompositeViewなど全てのViewのtemplateで使用出来ます。

  • $el.htmlの代わりにinnerHTMLを使う例です。

attachElContent: function(html) {
 this.el.innerHTML = html;
 return this;
}
  • CollectionViewにbefore:remove:childが追加されました。

  • CollectionViewとCompositeViewがcollectionのcomparatorを尊重してrenderするようになりました。新しいviewを追加するときはrerenderするときなどはcomparatorに応じた並び順になります。

  • この挙動が好ましくない場合はsort: falseのオプションを渡すことで無効にすることが出来ます。

  • CollectionViewとCompositeViewにemptyViewOptionsが渡せるようになってemptyViewをカスタマイズ出来るようになりました。

  • LayoutViewではgetRegionManagerを使うことでカスタムのRegionManagerを使うことが出来るようになりました。

  • LayoutViewでインスタンス化する際にもregionsを指定出来るようになりました。以前は新しいLayoutViewのclassを作る必要がありました。

new Marionette.LayoutView({
 regions: {
   "cat": ".doge",
   "wow": {
     selector: ".such",
     regionClass: Coin
   }
 }
})
  • LayoutViewがregionOptionsという新しいプロパティを持つようになりました。これはregionが作られる際に使用されます。

Cleanup

  • MyClass.prototype.constructorとしていた部分をシンプルにMyClassで参照するようになりました。

  • ユニットテストフレームワークをJasmineからMochaに変更しました。

  • 全てのPRのコードはcoverallsで計測されるようになりました。これは私達にテストとのズレを特定するための統計を提供してくれます。

  • さらに詳しく見るにはこちらを参照してください。 https://github.com/Puppets/marionette-changelog-detail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment