listening to modal events

Author: Lloyd@MNet

TestApp/Sample.Modal.html

@@ -42,7 +42,9 @@ <h2>Live Example</h2>
                             <h3>customized header</h3>
                         </div>
                         <div class="modalbody">
-                            <h3>customized body</h3>
+                            <p>Name <input type="text" /></p>
+                            <p>Age <input type="text" /></p>
+                            <p>Info <input type="text" /></p>
                         </div>
                     </modal>
                 </div>

TestApp/ScriptsLocal/components/Modal.html

@@ -9,13 +9,13 @@ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
             </div>
             <div class="modal-body">
                 <content select=".modalbody">
-                    <div class="modal-body">
+                    <div>
                         default body
                     </div>
                 </content>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" v-on="click: show = false">Close</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary">Save changes</button>
             </div>
         </div>

TestApp/ScriptsLocal/components/Modal.js

@@ -11,6 +11,8 @@
                     }
                 },
                 ready: function () {
+                    $(this.$el).on('shown.bs.modal', () => this.show = true);
+                    $(this.$el).on('hidden.bs.modal', () => this.show = false);
                     this.showModal(this.show);  
                 },
                 methods: {