Clever Geek Handbook

Bootstrap + Ember.jsガイド。 パート1：Amberのモーダルウィンドウまたは友だちにする方法Bootstrap ModalとEmber.js

Bootstrapが大好きで、それを仕事で積極的に使用し、ember.jsの世界に飛び込むことに決めた場合、Stack Overflowの裏通りを数十の質問への回答を求めてエキサイティングな旅をすることになります。 Ember.js への私の銀河ガイドはそれらのいくつかに答えることができます、例えば：



Ember.jsでBootstrapモーダルウィンドウを使用する方法



答えに移る前に、私のガイドブック全体に目を見張るような紹介が必要です。 考え直すことなく、 ember.js ユニバースを征服したい人を確実にサポートする2つの短い言葉を思い出しました



「パニックしないで！」



良いスタート。 行こう！



モーダルウィンドウを使用するときに考慮すべきことを推定しましょう。



  1. アプリケーションの任意の部分への簡単な統合
  2. 状況に応じて、さまざまなモデルをモーダルウィンドウに転送
  3. モーダルウィンドウのサイズとスタイルの調整


補助{{outlet 'modal'}}からモーダルウィンドウを読み込みます。 たとえば、/曲ページで曲を編集したいとします。 /曲のテンプレートは次のようになります。 



// templates/songs /* */ {{outlet 'modal'}} //


次に、modal-window.hbsコンポーネントを作成し、モーダルウィンドウのヘッダーとフッターのすべての要素をそこに配置する必要があります。 



 ember generate component modal-window


次のコードをその中に配置します。 



 /templates/components/modal-window.hbs <div class="modal fade"> <div class="modal-dialog {{size}}"> // {{size}} -       <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">{{title}}</h4> //  </div> <div class="modal-body"> {{yield}} //        </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"></button> <button type="button" class="btn btn-primary" {{action 'save'}}> </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->


{{size}}変数が追加されていることに注意してください。 クラスを渡して、モーダルウィンドウ（modal-sm、modal-lg）のサイズを制御します。 同様に、クラスを他のブロックに追加できます。



{{yield}}は、モーダルウィンドウの主要部分が表示される場所です。 少し後で彼女に戻ります。 コンポーネントの使用方法がわからない場合は、 こちらの公式ガイドをご覧ください 。



モーダルウィンドウのフッターにある「保存」ボタンと「閉じる」ボタンのアクションをすぐに追加するとよいでしょう。 これを行うには、コンポーネントcomponents / modal-window.jsのクラスに次のコードを追加します。 



 //components/modal-window.js actions: { save: function() { this.$('.modal').modal('hide'); this.sendAction('save'); } }, show: function() { this.$('.modal').modal().on('hidden.bs.modal', function() { this.sendAction('close'); }.bind(this)); }.on('didInsertElement') //


今から楽しい部分です。



上記で作成したコンポーネントの{{yield}}に表示される新しいテンプレートを作成し、{{outlet 'modal'}}にロードします 



 ember generate template modals/song


次のコードをそこに貼り付けます 



 //templates/modals/song.hbs {{#modal-window title=" " size="modal-sm" save='save' close='removeModal'}} <form {{action 'save' on='submit'}}> {{input type="text" value=name class="form-control"}} {{input type="text" class="form-control" value=fromServ}} </form> {{/modal-window}}


パラメータをコンポーネントに渡しました（タイトル、サイズ、保存、閉じる）。 次に、このテンプレートのコントローラーを作成します。 



 ember generate controller modals/song


保存ボタンのアクションをそこに追加します。 



 // controlers/modals/song actions: { save: function() { //  } }


最後の段階-{{outlet 'modal'}}で読み込むテンプレートとパラメーターを指定する必要があります。



これを行うには、モーダルウィンドウ呼び出しボタンを介してパラメーターを渡すだけです。 



 // templates/songs -      /* */ <button {{ action 'showModal' //    'modals/song' //   model //   }}>  </button> {{outlet 'modal'}} //


次に、{{outlet 'modal'}}を含むルートテンプレートで 'showModal'のハンドラーを切断します。この例では、ルート/曲です。 



 //routes/songs actions: { showModal: function(name, model) { this.render(name, { into: 'songs', outlet: 'modal', model: model }); }, removeModal: function() { this.disconnectOutlet({ outlet: 'modal', parentView: 'songs' }); }, }


もう一度主なことについて。



モーダルウィンドウの呼び出しボタンをクリックすると、次のパラメーターが取得されます。



  1. アクション 'showModal'-モーダルウィンドウを表示するテンプレートのルートに記述します
  2. 'modals / song'-モーダルウィンドウコンポーネントと共にロードされるテンプレート
  3. model-このモーダルウィンドウのモデル


次にshowModalメソッドが呼び出され、{{outlet： 'modal'}}に目的のモデルを持つモーダルウィンドウのテンプレートが配置されます。

モーダルウィンドウテンプレートでは、モーダルウィンドウのコンポーネントがロードされ、その場所にモーダルウィンドウを画面に表示するshow関数があります。



できた！ ご清聴ありがとうございました。



PS：アイデアをくれたEmberGuruに感謝します。


More articles:


All Articles