how to trigger element features after render in ember-cli - ember.js

I want to add tooltips onto a button in a component that can appear based on a set of results back from the server. (i.e. action buttons for delete, edit etc.)
I have created a “search” component that is rendering into the application and when a search button is clicked the server may return a number of rows into that same search component template.
so for example:
My-app/pods/factual-data/template.hbs
Contains:
…
{{#if results}}
<div class="row">
<div class="col-sm-3"><b>Factual ID</b></div>
<div class="col-sm-2"><b>Name</b></div>
<div class="col-sm-2"><b>Town</b></div>
<div class="col-sm-2"><b>Post Code</b></div>
<div class="col-sm-2"><b>Actions</b></div>
</div>
{{/if}}
{{#each result in results}}
<div class="row">
<div class="col-sm-3">{{result.factual_id}}</div>
<div class="col-sm-2">{{result.name}}</div>
<div class="col-sm-2">{{result.locality}}</div>
<div class="col-sm-2">{{result.postcode}}</div>
<div class="col-sm-2">
<button {{action "clearFromFactual" result.factual_id}} class="btn btn-danger btn-cons tip" type="button" data-toggle="tooltip" class="btn btn-white tip" type="button" data-original-title="Empty this Row<br> on Factual" ><i class="fa fa-check"></i></button>
</div>
</div>
{{/each}}
…
However I cannot get the tooltip code to function, due to an element insert detection/timing issue..
In the component
My-app/pods/factual-data/component.js
Contains:
...
didInsertElement : function(){
console.log("COMPONENT: didInsertElement");
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
this.enableToolTips();
},enableToolTips: function() {
var $el = Ember.$('.tip');
console.log("TOOLTIP:", $el);
if($el.length > 0) {
$el.tooltip({
html:true,
delay: { show: 250, hide: 750 }
});
}
}
...
However it seems didInsertElement is only run when the component is first rendered, is there a different function that is called everytime something in the DOM is changed within a component?
I did try to use observes: i.e.
…
enableToolTips: function() {
var $el = Ember.$('.tip');
console.log("TOOLTIP:", $el);
if($el.length > 0) {
$el.tooltip({
html:true,
delay: { show: 250, hide: 750 }
});
}
}.observes('results')
…
Which does trigger when the results variable is changed however it is still triggering before the content is actually rendered. I am assuming this because is I manually run in the console Ember.$('.tip').tooltip() (after the button is displayed) then the tooltips work ok.
Any pointers on this issue?

Try
enableToolTips: function() {
Ember.run.scheduleOnce('afterRender', this, function() {
var $el = Ember.$('.tip');
console.log("TOOLTIP:", $el);
if($el.length > 0) {
$el.tooltip({
html:true,
delay: { show: 250, hide: 750 }
});
}
});
}.observes('results')

Checking Ember.Component API there are two hooks that can do that
willClearRender : When component html is about to change.
willInsertElement : When old html is cleared and new one is going to be placed.
But you need to have a look on scheduleOnce.
Its worth noting that didInsertElement runs every time. But when it runs view was not updated. To solve that you need to run your code inside a Run Loop like this
didInsertElement : function(){
var self = this;
Ember.run.scheduleOnce('afterRender', this, function(){
//run tool tip here
self.$().find(".tip").tooltip({
});
});
}

Related

How should I reload model from child controller in emberjs?

I am having problem while trying to update the model values, when PendingActionController.updateStage method is called I need it to update the related model & reflect the updated values. If I create another method in PendingController like ShowMessage it displays the alert.
Please explain What approach should I use?
For example, following is the code:
<script type="text/x-handlebars" id="pending/_actions">
<div class="content-actions">
<h2>Pending Actions</h2>
<ul>
{{#each pendingstages}}
<li>
{{#unless refreshingStage}}
{{render 'pendingAction' this}}
{{/unless}}
</li>
{{/each}}
</ul>
</div>
</script>
<script type="text/x-handlebars" id="pendingAction">
<div class="actionsBox">
<div class="actionsBar">
<div {{bindAttr class=":actionStatus completed:blue:green"}} {{action updateStage this}}> </div>
</div>
<div class="clear-both"></div>
</div>
</script>
PendingController:
App.PendingController = App.BaseObjectController.extend(App.ActionsControllerMixin, {
needs: ['application'],
postRender: function () {
//Some code here....
},
pendingstages: function(){
return App.PendingStage.find({Id: this.get('model.id')});
}.property('model.id', 'model.#stages.completed', 'refreshStage'),
ShowMessage: function(){
alert('Inside Sohw message.');
},
});
PendingActionController
App.PendingActionMixin = {
isEditing: false,
canDelete: true,
canEdit: true,
toggleIsEditing: function(){
this.toggleProperty('isEditing');
}
};
App.PendingActionController = App.BaseObjectController.extend(App.PendingActionMixin, {
needs: 'pending',
postRender: function(){
//some code here...
},
updateStage: function(stage){
var self = this;
this.get('controllers.pending').send('pendingstages');
},
});
EDIT (1):
Followignt are the versions of Ember & ember-data:
ember-1.0.0-master.js
ember-data-master.js: CURRENT_API_REVISION: 12
Problem can be solved by using store.fetch instead of store.find.
store.fetch always calls the API, whether that particular data exists in local ember-data store or not. Use it like this..
pendingstages: function(){
return App.PendingStage.fetch({Id: this.get('model.id')});
}.property('model.id', 'model.#stages.completed', 'refreshStage'),
See ember-data/store.js code. It is deprecated now. But you'll find new methods instead of this.

Bootstrap 3 - Open model and get id or data atribute (both ways ok)

I have two div, have open the same modal window:
<div id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
<div id="oportunidades" data-toggle="modal" data-target="#myModalReguOpor" data-alert="oportunidades">
Content...
</div>
When invoking the event that opens the modal, I want to get the id atribute or the value of the data-alert, of the div which I am clicking.
$("#myModalReguOpor").on('shown.bs.modal', function () {
// here I want to get the id or data-alert value, about the div that i'm clicking
});
How could make it?
Thanks,
You can do like this
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
I would suggest to replace id with data-attribute like data-id="regulatorias" in modal trigger button
<div data-id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
and in JS
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
});
});

Ember Controller extend not loading variables into template

I've created a mixin, a controller, and a template.
// checkIn/index.js.handlebars
<div class="page-header text-center">
<h2>
Check in for
{{#unless checkInSettings.loaded}}
<span class="icon-spinner icon-spin"></span>
{{else}}
<span class="text-info">{{checkInSettings.programName}}</span> - <span class="text-info">{{checkInSettings.programStartDate}}</span>
{{/unless}}
</h2>
</div>
// controllers/check_in_controller.js
App.CheckInController = Em.Controller.extend(App.LoadCheckInSettings);
// mixins/load_check_in_settings.js
App.LoadCheckInSettings = Em.Mixin.create({
init: function() {
this._super();
if (!this.get('checkInSettings')) {
this.set('checkInSettings', App.CheckInSettings.create());
this.get('checkInSettings').set('isLoading', true);
var self = this;
$.getJSON('/check_in/settings').then(function(data) {
self.get('checkInSettings').set('isLoading', false);
self.get('checkInSettings').set('programName', data.program_name);
self.get('checkInSettings').set('programAcademicYear', data.program_academic_year);
self.get('checkInSettings').set('programStartDate', data.program_start_date);
self.get('checkInSettings').set('loaded', true);
});
}
}
});
I am trying to load checkInSettings into the entire CheckInController and all its subcontrollers. I would like to see checkInSettings in my checkIn/index template, but it's not showing up.
What does work is if I create the controller:
// controllers/check_in_index_controller.js
App.CheckInIndexController = Em.Controller.extend(App.LoadCheckInSettings);
However, I want to load the settings for use in other areas of CheckIn, such as the settings page.
Is there a way to load this mixin for the all of CheckIn, in the controller or route, so that I can access checkInSettings from index or settings?
Create a controller CheckInsIndexController. On that controller add these two properties needs: ['check_ins'], a checkinsBinding: 'controllers.checkIns.content'. Then you can use checkIns in your index template.

Ember removes element from DOM after creating it, and jQuery can not find it

I have this wrapper around Ember.Select, to activate Select2 features:
App.Select2SelectView = Ember.Select.extend({
prompt: 'Please select...',
classNames: ['input-xlarge'],
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
},
processChildElements: function() {
this.$().select2({
// do here any configuration of the
// select2 component
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
},
willDestroyElement: function () {
this.$().select2('destroy');
}
});
Sometimes I need to make a drop-down invisible, and I do it like this:
{{#if cityVisible}}
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
{{view SettingsApp.Select2SelectView
id="city-id"
contentBinding="currentCities"
optionValuePath="content.city"
optionLabelPath="content.city"
selectionBinding="controller.selectedCity"
prompt="Select a city"}}
<i class="help-block">Select the city for your geographical number</i>
</div>
</div>
{{/if}}
But whenever the drop-down is invisible, I get the following error:
Uncaught TypeError: Cannot call method 'select2' of undefined
I guess the element is inserted, but then removed by Ember from the DOM (bound property cityVisible), so that jQuery is not able to find it?
What can I do to avoid that error message? I do not want to make the view visible/invisible, I want to keep the whole control-group under the cityVisible control.
This is normal behaviuor that ember removes the view, as a workaround you could do the following:
HTML
<div {{bindAttr class="view.cityVisible::hideCities"}}>
<div class="control-group">
...
</div>
</div>
CSS
.hideCities {
display: none;
}
Remove the {{#if}} around the html block, and wrap it with a div instead on which you set a css class which contains display: none; you could use the cityVisible or a different property in your view or controller and set it to true/false to toggle it's visibility. This mecanisnm should leave your html markup in the DOM an thus available for jQuery. Note that if your citiesVisible property lives in your controller then remove the view. prefix from view.citiesVisible to be only citiesVisible, this depends on your setup.
See demo here.
Hope it helps.

Accessing properties of a child view created within {{#each}} iterator

Edit: Problem was with my own local settings and the way I was including the views in my application. Once I fixed those issues, the problem was resolves. The code here is actually correct. The answer Chrixian provided also work.
I am stuck on something that seems rather simple. I want to access some computed properties of my view constructed inside an each loop in handlebars.
<div class='build-buttons-wrapper'>
<button class="list-builds-button" {{action "toggleBuildsList" target="view"}} ></button>
<button class="build-button" {{action "buildApp" on="click" target="view"}} >Build</button>
</div>
<div class='builds-list'>
<h2 class="build-title">Latest builds</h2>
<ul class="builds-list">
{{#each content}}
{{#view Jimux.BuildView buildBinding="this"}}
<span class="build-date">{{createdAt}}</span>
<a {{bindAttr href="srcArchive"}} class="download-button source">Source</a>
{{! *here are different ways I have tried to access "finished" property* }}
{{log build.view.finished}}
{{log view.finished}}
{{log finished}}
{{log this.finished}}
{{log build.finished}}
{{#if build.finished}}
<div class="build-progressbar"></div>
{{else}}
<div class="build-progressbar"><div class="build-percent" style="width:{{unbound percent}}%"></div></div>
{{/if}}
{{/view}}
{{/each}}
</ul>
</div>
Here is the BuildsView which is using this template:
Jimux.BuildsView = Em.View.extend({
templateName: 'builds'
listVisible: false
classNames: ['builds-view']
buildApp: (view, event, ctx) ->
#get('controller').newBuild()
,
hideList: ->
#set 'listVisible', false
this.$(".builds-list").hide("slide", {direction: "up"}, 300)
,
showList: ->
#set 'listVisible', true
this.$(".builds-list").show("slide", {direction: "up"}, 300)
,
toggleBuildsList: (view, event, ctx) ->
if #get 'listVisible' then #hideList() else #showList()
,
didInsertElement: ->
#hideList() if not #get 'listVisible'
})
And here is the BuildView which is created inside the {{#each}} iterator in the template above.
Jimux.BuildView = Ember.View.extend(
tagName: 'div',
classNames: ['build-item'],
#testBinding: true,
sample: true,
finished: ( ->
return true
#return (#get 'percent') == 100
).property('percent')
)
Everything above works as expected. For example I can access percent property of each child view using {{percent}}. But if I define my own properties inside the Jimux.BuildView as show above, I cant seem to find a way to access them within the handlebars {{#each}} iterator. You can see the different ways I have tried inside the handlebars code with {{log}} statements, all those print undefined in the console. What am I missing here?
I'm assuming the percent property you are referring to is a property of each "content" object you are looping over-- if that's the case making finished look like this:
finished: (->
return #get('context.percent') is 100
).property('context.percent')
You should be able to simply use {{finished}} within the {{#view Jimux.BuildView}} .. {{/view}} block