Skip to content

Instantly share code, notes, and snippets.

@sunnydoll

sunnydoll/app.js

Created December 1, 2015 20:20
Show Gist options
  • Save sunnydoll/a85576f8f3b27abc62c0 to your computer and use it in GitHub Desktop.
Save sunnydoll/a85576f8f3b27abc62c0 to your computer and use it in GitHub Desktop.
Download ZIP
Programmatically Insert Ember Component
Raw
app.js
var app = Ember.Application.create();
app.ApplicationController = Ember.Controller.extend({
modals: Ember.inject.service(),
// init: function() {
// console.log(this.get('modals'));
// },
actions: {
openModal: function(name) {
this.get('modals').open(name);
}
}
});
app.ModalsService = Ember.Service.extend({
containerView: null,
open: function(name) {
var Modal = this.container.lookupFactory('component:'+name+'-modal');
var modal = Modal.create();
this.get('containerView').pushObject(modal);
},
close: function() {
this.get('containerView').popObject();
}
});
app.MyModalsComponent = Ember.ContainerView.extend({
elementId: 'my-modals',
modals: Ember.inject.service(),
didInsertElement: function() {
this.set('modals.containerView', this);
}
});
app.BaseModalComponent = Ember.Component.extend({
modals: Ember.inject.service(),
actions: {
close: function() {
this.get('modals').close();
}
}
});
app.FooModalComponent = app.BaseModalComponent.extend({
layoutName: 'components/foo-modal'
});
app.BarModalComponent = app.BaseModalComponent.extend({
layoutName: 'components/bar-modal'
});
app.PickerModalComponent = app.BaseModalComponent.extend({
layoutName: 'components/picker-modal',
pickerWrapper: null,
pickerData: null,
classNames: ['input-small'],
format: "l",
placeholder: Ember.computed.alias('format'),
iconOnRight: true,
didInsertElement: function () {
var self = this;
var format = this.get('format');
var pickerWrapper = this.$().datetimepicker({
format: 'l'
//viewMode: 'years'
//minDate: "1/1/" + (moment().year() - 2).toString()
});
this.set('pickerWrapper', pickerWrapper);
var pickerData = pickerWrapper.data("DateTimePicker");
this.set('pickerData', pickerData);
if(this.get('datetime'))
pickerData.setDate(this.get('datetime'));
pickerWrapper.on('dp.change', function (ev) {
//self.sendAction('action', ev.format());
self.set('datetime', ev.date);
});
},
datetimeChanged: function () {
// get model datetime
var modelDatetime = this.get('datetime');
// get picker datetime
var picker = this.get('pickerData');
var pickerDatetime = picker.getDate();
// if not the same the overwrite model over picker
if (modelDatetime != pickerDatetime) {
picker.setDate(modelDatetime);
}
picker.hide();
}.observes('datetime')
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/css/bootstrap-datetimepicker.css">
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<div {{action 'openModal' 'foo'}}>Open Foo</div>
<div {{action 'openModal' 'bar'}}>Open Bar</div>
<div {{action 'openModal' 'picker'}}>Open Picker</div>
{{my-modals}}
</script>
<script type="text/x-handlebars" data-template-name="components/foo-modal">
Foo modal
<span {{action 'close'}}>&times;</span>
</script>
<script type="text/x-handlebars" data-template-name="components/bar-modal">
Bar modal
<span {{action 'close'}}>&times;</span>
</script>
<script type="text/x-handlebars" data-template-name="components/picker-modal">
<div class="form-group">
<div class='input-group date'>
{{#if iconOnRight}}
<input type='text' placeholder="mm/dd/yyyy" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
{{else}}
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type='text' placeholder="mm/dd/yyyy" class="form-control" />
{{/if}}
</div>
</div>
</script>
</body>
</html>
Raw
style.css
html, body {
margin: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment