Two way binding breaks in Ember when using jquery ui dialog
Here are my routes:
ExtractCreator.Router.map(function () {
this.route('filter', { path: '/' }, function () {
this.route('geog_levels');
});
});
Here's my view that creates the jquery ui popup:
ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
var controller = this.controller;
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
close: function(e,ui) {
controller.transitionToRoute('filter');
},
}).dialog("moveToTop");
}
});
And the template:
{{#each geog_level_group in model}}
<h3>{{geog_level_group.label}}</h3>
{{#each geog_level_filter in geog_level_group.geog_level_filters}}
<div {{bind-attr class="geog_level_filter.disabled?:disabled"}}>
<label>{{geog_level_filter.label}} - {{geog_level_filter.id}}</label>
{{input type="text" value=geog_level_filter.label }}
</div>
{{/each}}
{{/each}}
I bind inputs to my model in the template, but whenever I enter anything in the input field, it doesn't update anywhere on the page and doesn't show up as updated in my (chrome) model's ember inspector view.
If I change the value manually using the ember inspector, it updates inside the popup correctly.
If I bring it out of the popup (or just remove the popup code) then everything is linking correctly and the label will update when the input value changes.
How do I get the correct binding behavior to work inside a dialog box?
source to share
Turns out the reason it wasn't related is that the jQuery-ui dialog function added a "# filter-dialog" element to the body tag, but when building my Ember app I used "rootElement" to restrict the scope of Ember to others div with id "extract-creator".
My app code:
ExtractCreator = Ember.Application.create({
rootElement: '#extract-creator'
});
Using the appendTo parameter when creating the dialog, I can save it within the Ember app:
ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
var controller = this.controller;
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
appendTo: "#extract-creator",
close: function(e,ui) {
controller.transitionToRoute('filter');
},
}).dialog("moveToTop");
}
});
An alternative solution would be to remove the "rootElement" string from the Ember creation option hash, making it the default body tag.
Special thanks to Buck Doyle for posting a working JSBin in the comments.
source to share
Well i ran into the same weird behavior and the problem is mayBe due to didInsertElement with child views. (yes, some of them have child views when using each and ember {{input}}, which is also a view).
One way that might solve your problem is to run your modal after ember has finished rendering everything in the queue. You can achieve this by changing your code like this:
didInsertElement : function(){
var controller = this.controller;
Ember.run.scheduleOnce('afterRender', this ,function(){
$('#filter-dialog').dialog({
modal:true,
stack: false,
title: "Geogography Levels Filter",
close: function(e,ui) {
controller.transitionToRoute('filter');
},}).dialog("moveToTop");
});
}
source to share