JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<script id="myDlgTemplate" type="text/html">
<p>My content</p>
</script>
<button id="btnLauncher">Launch Dialog</button>
JavaScript
var dlgModel = Backbone.Model.extend();
var dlgView = Backbone.Marionette.ItemView.extend({
template: '#myDlgTemplate',
className: 'myDlgClass',
onRender: function() {
_.bindAll(this);
this.$el.dialog({
title: "My Dialog",
modal: true,
buttons: {
"Ok": this.func1,
"Cancel": this.func2
}
});
},
func1: function() {
console.log("calling func1");
this.$el.dialog("close");
},
func2: function() {
console.log("calling func2");
this.$el.dialog("close");
}
});
$("#btnLauncher").click(function() {
var myDlgModel = new dlgModel();
alert("boo");
var myDlg = new dlgView({
model: myDlgModel
});
//myDlg.render();
});