Skip to content

Instantly share code, notes, and snippets.

@magnet88jp

magnet88jp/marionette-modal1.html

Created May 18, 2015 17:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save magnet88jp/c20af07b5561c01a1f1a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save magnet88jp/c20af07b5561c01a1f1a to your computer and use it in GitHub Desktop.
Download ZIP
modal sample by marionette
Raw
marionette-modal1.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Backbone Modal Sample</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--[if lte IE 8]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.js"></script>
<script>
var ModalRegion = Marionette.Region.extend({
el: "#modal",
constructor: function(){
// _.bindAll(this);
Marionette.Region.prototype.constructor.apply(this, arguments);
this.on("view:show", this.showModal, this);
},
getEl: function(selector){
var $el = $(selector);
$el.on("hidden", this.close);
return $el;
},
showModal: function(view){
view.on("close", this.hideModal, this);
this.$el.modal('show');
},
hideModal: function(){
this.$el.modal('hide');
}
});
var MyView = Marionette.ItemView.extend({
template: '#modal-template',
events: {
}
});
var App = new Backbone.Marionette.Application();
App.addRegions({
main: "#modal-template",
modal: ModalRegion
});
$(function() {
var view = new MyView();
var $modalEl = $('#modal-template');
$modalEl.html(view.render.el);
$('#openModal').click(function(){
console.log('test');
// $modalEl.modal('show');
App.modal.show(view);
})
});
</script>
</head>
<body>
<div id="main-content"></div>
<div id="modal"></div>
<!-- Button to trigger modal -->
<a href="#modal-template" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<button class="btn btn-primary" id="openModal">open</button>
<!-- Modal -->
<div id="modal-template" class="modal fade"> <!-- Modal本体 -->
<div class="modal-dialog"> <!-- Modalダイアログ部分 -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- closeボタン -->
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script id="modal-view-template" type="text/html">
<div class="modal-header">
<h2>This is a modal!</h2>
</div>
<div class="modal-body">
<p>With some content in it!</p>
</div>
<div class="modal-footer">
<button class="btn">cancel</button>
<button class="btn-default">Ok</button>
</div>
</script>
<h4>参考</h4>
<ul>
<li>https://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/</li>
<li>http://codezine.jp/article/detail/8270</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment