3番目のバージョンが開発され始めて、ついに本日リリースされてから2年以上が経ちました！ だから、誰が気にし、誰がMarionette.jsで待っていて働いていたのか-タックルへようこそ。
コアチームのメンバーは非常に良い仕事をし、いくつかの良い変更を加えました。
始めましょう。
表示する
Marionette.Viewは著しく変化しました。 バージョン2のドキュメントから覚えているように、これは単なる未使用のクラスではありません
注：Marionette.Viewクラスは、直接使用するためのものではありません
完全なビュー。
さらに、 Marionette.ItemViewとMarionette.LayoutViewとMarionette.ItemView両方が含まれるようになりました。 はい、ご理解のMarionette.LayoutView 、 Marionette.ItemViewまたはMarionette.LayoutViewはなくなりました。これらは削除されました。 コードで3番目のバージョンを使用するには、 Marionette.ItemViewとMarionette.LayoutViewをMarionette.Viewに置き換えるだけで済みます。
小さな例を見てみましょう：
import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: _.template('<h1> 3- </h1>'), onRender() { console.log(' ') } });
生きている例
また、 ViewをLayoutViewとして使用する方法の例
import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ regions: { region1:'#region1', region2: '#region2' }, onRender() { this.showChildView('region1', childView1); this.showChildView('region2', childView2); } });
生きている例
私たちはそれを理解しました。 どうぞ
Compositeview
Marionette.CompositeViewはdeprecatedになり、多くの質問が一度に発生します。 ドキュメントで推奨されているタブレットまたはツリーメニューを作成するにはどうすればよいですか？ すべてが非常に簡単です。そのためには、 Marionette.ViewとMarionette.CollectionViewを使用する必要があります。 みんなはテーブルとツリーメニューの良い比較例を用意しました。
ところで、新しいバージョンのドキュメントは著しく改善されました。 スコット・ウォルトンは、 マリオネット・ガイドとも呼ばれています 。
コレクションビュー
Marionette.CollectionViewは基本的に変更されていません。 getChildViewおよびgetEmptyViewは削除されました。 代わりに、あなたはそうすることができます
Mn.CollectionView({ childView() {
また、 Backbone.BabySitter依存関係から削除され、フレームワークのコアに完全に統合されています。 それでは、小さな例を使ってメモリをリフレッシュしましょう。
import Mn from 'backbone.marionette'; const data = [ { item: ' ' }, { item: ' ' }, { item: ' ' } ]; const collection = new Backbone.Collection(data); const childViewTemplate = _.template('<%= item %>'); const ChildView = Mn.View.extend({ template: childViewTemplate }); const collectionView = new Mn.CollectionView({ el: 'body', childView: ChildView, collection: collection }); collectionView.render();
生きている例
View.Events
Viewのライフサイクルが変更されました。 before:showおよびshowイベントは削除されました。 これは次のようになります。
before:render -> render -> before:attach -> attach -> dome:refresh before:detach -> detach -> before:destroy -> destroy
例
import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: false, onBeforeRender() { console.log(1) }, onRender() { console.log(2) }, onbeforeDestroy() { console.log(3) }, onDestroy() { console.log(4); } }); const myView = new MyView(); myView.render(); myView.destroy();
生きている例
チャイルドビューイベント
APIが少し変更され、 childEvents代わりにchildEventsを使用する必要があります。
import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ childViewEvents: { 'some:event': 'eventHandler' } eventHandler() { console.log(' '); } });
生きている例
テンプレート
templateHelpers名前が変更されました。
import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: template, templateContext() { return { version: '3.0' } } });
生きている例
Backbone.Radio
Backbone.Wreqr置き換えられました。これは、アプリケーション内のモジュール間の通信用の強力なライブラリです。
Backbone.Radio Marionette.Object緊密に統合されているため、アプリケーションのすべてのイベントを1か所で聞くことができます。
生きている例
APIの変更
- `bindEntityEvents` -> `bindEvents` - `unbindEntityEvents ` -> `unbindEvents` - `normalizeUIString`, `normalizeUIKeys`, `normalizeUIValues` -> `normalizeMethods` - `proxyGetOption` -> `getOption` - `proxyBindEntityEvents` -> `bindEvents` - `proxyUnbindEntityEvents` -> `unbindEvents`
何が削除されましたか？
Marionette.ControllerMarionette.ModuleMarionette.RegionManager
新しいバージョンへの移行はそれほど苦痛ではありません。
以下は、彼のプロジェクトの1つにおける 、 コアチームPaul Falgoutのリーダーのコミットメントです。
templateHelpers -> templateContext Marionette.ItemView -> Marionette.View Marionette.LayoutView -> Marionette.View childEvents -> childViewEvents render:collection / onRenderCollection -> render:children / onRenderChildren before:show / show / onBeforeShow / onShow -> attach etc
開発者の作業を楽にするために、 marionette-v3-compatバブルライブラリが作成されました。
異なるプロジェクトビルダーを使用した3番目のバージョンの例もあります。
Marionette.js githubリポジトリ