I am working on an Ember.js - based platform, where I use nicEdit. Here is my code
RichHTMLView = Ember.TextArea.extend({
id: null,
editor: null,
didInsertElement: function(){
var view = this;
view.id = this.get("elementId");
view.editor = new nicEditor({
buttonList : ['bold','italic','underline','right','center','justify', 'link', 'ul', 'ol']
}).panelInstance(view.id);
//When the editor looses focus the content of the editor is passed to descr
view.editor.addEvent('blur',function(){
view.get('controller').set('descr',view.getViewContent());
});
//So the editor looks nice
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');
},
getViewContent: function(){
var view = this,
inlineEditor = view.editor.instanceById(view.id);
return inlineEditor.getContent();
},
willClearRender: function(){
var view = this;
}
});
So this works nicely as long as I am on the page which hosts the view, but if I transition to another route, the view has some leftovers, namely the editor is destroyed, but I assume that nicEdit keeps track of event bindings, so I end up with the blur event being bound to editor, which is undefined in the new context, as the view does not exist.
My best guess is that I need to somehow unbind the editor in the willClearRender, but I don't know how.
as I got no reply and nicEdit is abandoned I made some changes to the source-code in order to deal with this issue by adding removeEvent to bkEvent:
removeEvent: function(A, B){
if (B){
this.eventList = this.eventList || {};
this.eventList[A] = this.eventList[A] || [];
this.eventList[A].splice(this.eventList[A].indexOf(B),1);
}
Then I can remove the event in willClearRender:
view.editor.removeEvent('blur',view.onBlur);
Be aware that I've not tested it with multiple editors, as my needs do not require, but if you have multiple editors with the same callback the behavior is not defined.
Related
I have created the following button for an interactive grid (IG) using JavaScript Initialization Code in the IG attributes section.
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
lastToolbarGroup = toolbarData.toolbarFind("actions4"),
assembleButton = {
type: "BUTTON",
hot: false,
icon: "fa fa-send u-info-text",
iconBeforeLabel: true,
action: "assemble-as"
};
lastToolbarGroup.controls.push( assembleButton );
config.toolbarData = toolbarData;
// this is how actions are added
config.initActions = function(actions) {
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { apex.event.trigger("#hiddenAssembleAsButton", "hidden_assemble_as_button_click"); }
});
}
return config;
}
Then I created the hiddenAssembleAsButton using that name as the Static ID under advanced.
The button is defined by a dynamic action Hidden_Assemble_As_Button_Click which is where I think I should be able to redirect the page, but I'm not sure.
It seems like the page redirect should happen in the jQuery Selector but I don't know what to put there or if that's the correct area to add the code.
I can add images if necessary but I feel like I've described this pretty well.
Sometimes, you need a button somewhere in the interactive grid, but you still like to use the declarative options APEX provides with basic buttons, like doing all the stuff like passing variable values, calculating checksums or opening a dialog when your target page is a model page. This can be difficult in pure javascript.
In this case, you can also just create a basic button, set it up all the way you like in the designer, then hide it using Advanced --> Custom Attributes: style="display:none". Also, set a static ID like button1.
Then, in your action, you can simply trigger a click on the button.
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { $('#button1').click(); }
});
Clicking the button does something. It triggers an event called hidden_assemble_as_button_click binded to an id #hiddenAssembleAsButton. You want it to redirect. The simplest option is to do the redirect right in that code. Replace the actions.add block with this one:
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { window.location.href = "http://www.stackoverflow.com"; }
});
The Ember page I'm working on is to display a of grid of operators and their jobs and have that list automatically update when the user creates a new job. My current best attempt will draw pre-existing jobs on page load, but the page doesn't refresh with any new jobs created using 'saveNewJob' even though I can see the new job in the Data view of Ember Inspector.
Here's the code with some '..snip..' inserted to focus on the important parts:
routes/scheduler.js
export default ember.Route.extend({
model: function() {
return {
jobs: this.store.query('job', {
location: session.location,
date: session.selectedDate
},
operators: this.store.query('operator', {
location: session.location
}
}
},
action: {
saveNewJob: function(params) {
var newJob = this.store.createRecord('job',{
//job properties from params
};
var thisRoute = this;
newJob.save().then(function(){ thisRoute.refresh() });
}
}
}
templates/scheduler.hbs
..snip..
{{#each model.operators as |op|}}
{{operator-row operator=op jobs=model.jobs}}
{{/each}}
{{outlet}}
templates/components/operator-row.hbs
<!-- Draw the grid for the operator -->
..snip..
<!--Draw jobs over grid -->
{{#if jobs.isFulfilled}}
{{#each jobsForOperator as |job|}}
{{operator-job job=job}}
{{/each}}
{{/if}}
component/operator-row.js
jobsForOperator: Ember.computed('jobs', function() {
var opId = this.operator.get('id');
var retVal this.jobs.filter(function(item) {
return item.get('operator').get('id') === opId;
});
<!-- Append some drawing properties to each job in retVal -->
..snip...
},
..snip..
I haven't seen a need to add anything to controller/scheduler. The operator-job component is a simple div that uses the drawing properties to correctly place/draw the div in the operator row.
There are various ways for a new job to be created, but I purposefully left them out because they all end up calling 'saveNewJob' and I am able to get a console.log statement to fire from there.
One solution I've tried is adding a 'this.store.findAll('job');' at the start of the model function and then using 'jobs: this.store.filter('job', function() { })' to create the model.jobs property. That sees neither the existing jobs nor the newly created job returned despite seeing my date and location matches return true.
So what am I doing wrong here? Is there a better way to get this refresh to happen automatically? Appreciate any help you all can give.
There is function for just this case DS.Store.filter. You use it instead of query. Something like this:
let filteredJobs = this.store.filter(
'job',
{location: session.location, date: session.selectedDate},
job => job.get('location') === session.location && job.get('date') === session.selectedDate
);
I have a component which is inserted into the DOM as a '' tag (e.g., default behaviour). The component's job is to wrap a 3rd party jQuery tool and I'm trying to ensure it is responsive to "resize" events so I would like to explicitly set width and height style attributes.
In the component, it is easy enough to being to the style attribute:
attributeBindings: ['style'],
style: function() {
return "width: auto";
}.property('widthCalc'),
In this case, this works but doesn't do anything useful because style just returns a static string (width: auto).
Instead what I want to do is -- based on any change to the computed property widthCalc -- set the width based on the new value. So here's the next logical step:
style: function() {
var width = $('body')[0].offsetWidth;
return 'width: ' + width + 'px';
}.property('widthCalc'),
This too works, dynamically setting the DIV to the width of the body's width (note: this isn't really what I want but it does prove that this simple binding works). Now what I really want is to get the value of width from a computed property on the component but I don't even have to go that far to run into trouble; notice that instead of a global jQuery selector I switch to a localised component-scoped selector:
style: function() {
var width = this.$().offsetWidth;
return 'width: ' + width + 'px';
}.property('widthCalc'),
Unfortunately this causes the page NOT to load and gives the following error:
Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
I imagine this is Ember run-loop juju but I'm not sure how to proceed. Any help would be appreciated.
Since it is not possible to call this.$() in the component before it has been added to the dom, provide an initial value until the component is ready.
For example,
Setting a default value to the property style and on didInsertElement event reopen the class and define style as a calculated property using this.$()
http://emberjs.jsbin.com/delexoqize/1/edit?html,js,output
js
App.MyCompComponent = Em.Component.extend({
attributeBindings:["style"],
style:"visibility:hidden",
prop1:null,
initializeThisStyle:function(){
this.set("style","visibility:visible");
this.reopen({
style:function(){
// var thisOffsetWidth = this.$().get(0).offsetWidth;
return "visibility:visible;color:red;background-color:lightgrey;width:"+this.get("prop1")+"px";
}.property("prop1")
});
}.on("didInsertElement")
});
Alternatively handle the error raised by this.$() and provide a default value. Afterwards when the component will be added the property will be calculated as planned.
http://emberjs.jsbin.com/hilalapoce/1/edit?html,js,output
js
App.MyCompComponent = Em.Component.extend({
attributeBindings:["style"],
style:function(){
try{
this.$();//this will throw an erro initialy
return "visibility:visible;color:red;background-color:lightgrey;width:"+this.get("prop1")+"px";
}catch(e){
return "color:blue";
}
}.property("prop1"),
prop1:null
});
With the component I was trying to solve for I ended coming up with an solution that seems effective to me which I will share below. For an understanding of the why I was getting the error and how one might more directly address that error please see the comment from #melc above.
My Solution
What I'm solving for is resizing a jQuery component wrapped in an Ember component. In many cases, resizing is handled gracefully by CSS alone but some jQuery components -- including the very nice knob component from aterrien -- has JS which gets directly involved and therefore needs the containers width and height properties to be set explicitly by the Ember component so that it reacts appropriately.
When solving for this I realised my use-case had two problems:
Solving for a page resize event
Adjusting to the fact that my knob component was -- at times -- in the DOM but in a part of the DOM which was not visible (more explicitly it was in Bootstrap tab which wasn't visible).
The Resize Listener
The first part of the solution is to listen for a page-level resize of the page. I do this with the following:
resizeListener: function() {
var self = this;
self.$(window).on('resize', Ember.run.bind(self, self.resizeDidHappen));
}.on('didInsertElement'),
Page Resize Handler
When a resize is done at the "page" level I now want my component to inspect what the resize impact has been on the component:
resizeDidHappen: function() {
Ember.run.debounce(this, function() {
// get dimensions
var newWidth = Number(this.$().parent().get(0).offsetWidth);
var newHeight = Number(this.$().parent().get(0).offsetHeight);
// set instance variables
this.set('width', newWidth);
this.set('height', newWidth);
// reconfigure knob
this.$('.knob').trigger(
'configure',
{
width: newWidth,
height: newWidth
}
);
}, 300);
}
This solves the page resize problem if it exists in isolation but to make the component it is probably a good idea to solve for the visibility use case as well (certainly in my case it was critical).
Visibility Handler
Why? Well, for two reasons that I can think of:
Many jQuery components refuse to load or perform badly if they aren't loaded
The ember component appears to not be able to establish a "resize" event when it is not visible in the DOM
The one problem is that there is no DOM-level event for visibility changes, so how do we react to a change in visibility without polling on an interval? Well in most cases there will be a UI element which is controlling the state of visibility. In my case it's Bootstrap's tab bar and in this case they have events that fire on the tabs when they become visible. Great. Here's a selector for Bootstrap's selector (assuming you're inside the content area of the newly visible tab):
visibilityEventEmitter: function(context) {
// since there is no specific DOM event for a change in visibility we must rely on
// whatever component is creating this change to notify us via a bespoke event
// this function is setup for a Bootstrap tab pane; for other event emmitters you will have to build your own
try {
var thisTabPane = context.$().closest('.tab-pane').attr('id');
var $emitter = context.$().closest('.tab-content').siblings('[role=tabpanel]').find('li a[aria-controls=' + thisTabPane + ']');
return $emitter;
} catch(e) {
console.log('Problem getting event emitter: %o', e);
}
return false;
},
visibilityEventName: 'shown.bs.tab',
then we just need to add the following code:
_init: function() {
var isVisible = this.$().get(0).offsetWidth > 0;
if (isVisible) {
this.visibilityDidHappen();
}
}.on('didInsertElement'),
visibilityListener: function() {
// Listen for visibility event and signal a resize when it happens
// note: this listener is placed on a DOM element which is assumed
// to always be visibile so no need to wait on placing this listener
var self = this;
Ember.run.schedule('afterRender', function() {
var $selector = self.get('visibilityEventEmitter')(self);
$selector.on(self.get('visibilityEventName'), Ember.run.bind(self, self.visibilityDidHappen ));
});
}.on('didInsertElement'),
visibilityDidHappen: function() {
// On the first visibility event, the component must be initialised
if(!this.get('isInitialised')) {
this.initiateKnob();
} else {
// force a resize assessment as window sizing may have changed
// since last time component was visible
this.resizeDidHappen();
}
},
Note that this also results in a tiny refactor of our resize listener, removing it's trigger from the didInsertElement event and instead being triggered by initiateKnob which will happen not when the Ember component loads but instead lazy load at the first point of visibility in the DOM.
initiateKnob: function() {
var self = this;
this.set('isInitialised', true);
var options = this.buildOptions();
this.$('.knob').knob(options);
this.syncValue();
this.resizeDidHappen(); // get dimensions initialised on load
console.log('setting resize listener for %s', self.elementId);
self.resizeListener(); // add a listener for future resize events
},
resizeListener: function() {
this.$(window).on('resize', Ember.run.bind(this, this.resizeDidHappen));
},
Does it work?
To a large degree but not completely. Here's what works:
the first 'tab' which is visible at load resizes on demand
all tabs resize when they are switched to (aka, when they gain visibility)
what doesn't work is:
tabs other than the first tab do not resize (aka, the onresize callback appears broken)
The error I get is:
vendor.js:13693 Uncaught TypeError: undefined is not a function
Backburner.run vendor.js:13716
Backburner.join vendor.js:34296
run.join vendor.js:34349
run.bind vendor.js:4759
jQuery.event.dispatch vendor.js:4427
jQuery.event.add.elemData.handle
Not sure what to make of this ... any help would be appreciated. Full code can be found here:
https://gist.github.com/295e7e05c3f2ec92fb45.git
I'm not trying to provide pagination within the view itself.
My API returns 500 records at a time and if there are more I'd like to automatically load them.
Although my solution right now does make the requests, I don't think it is the best way, but it does work.
App.StructureAdapter = App.ApplicationAdapter.extend({
findHasMany: function(store, record, url) {
// based on the normal `findHasMany` code
var host = Em.get(this, 'host'),
id = Em.get(record, 'id'),
type = record.constructor.typeKey;
if (host && url.charAt(0) === '/' && url.charAt(1) !== '/') {
url = host + url;
}
return this.findWithURL(this.urlPrefix(url, this.buildURL(type, id)), 1);
},
findWithURL: function(url, page) {
var that = this;
var completeUrl = url + "?page=" + page;
var nextPage = page + 1;
return this.ajax(completeUrl, 'GET').then(function(data) {
Em.Logger.log("calling then");
if (data.structures.length > 0){
that.findWithURL(url, nextPage);
}
return data;
});
}
});
My questions are:
Is there a better way to automatically get all of the pages for a given request?
How do I properly make sure the relationships are built. My Structure object has parent/children relationships on it, but only the first page of results is actually being associated correctly.
Update
Here is what my json response looks like:
{
"structures": [
{
"id": 6536,
"name": "Building",
"updated_at": "2013-05-21T07:14:54-06:00",
"person_id": 6535,
"notes": ""
},
... 499 more objects ...
]
}
It works properly, it loads the first group just fine. And I can adjust it in the extract/normalize methods if I need to.
Here is my normalize method as it is right now:
App.StructureSerializer = App.ApplicationSerializer.extend({
normalize: function(type, hash, prop) {
// adds the properly link to get children
hash.links = { "children": "structures" };
// change structure_id to parent_id
hash.parent_id = hash.structure_id;
delete hash.structure_id;
return this._super(type, hash, prop);
},
});
Again, the links makes it automatically know where to look for the has many relationship.
Looking at it closer, though the paginated pages actually do get called, they are not loaded into Ember data at all. So maybe if they did get loaded then the relationships would build properly.
Here's the best idea I have, I dunno how well it'd work and you might need to play around with it a bit.
In your StructureRoute, go ahead and return the model as normal, so:
App.StructureRoute = Ember.Route.extend({
model:function() {
return this.store.find('structure');
}
});
That'll fetch your first 500 objects and begin the route transition.
Then in your StructureController, fetch the other models using query parameters like this:
App.StructureController = Ember.ArrayController.extend({
init:function() {
this.loadNextPage(2);
this._super(); // this may not be necessary still, but the docs call for it
},
loadNextPage: function(page) {
var self = this;
var promise = this.store.find('structure',{page:page});
promise.then(function(structures) {
if(structures.get('length') < 500) {
self.loadNextPage(page + 1);
}
});
}
});
So when the StructureController initiates, it'll call the recursive function loadNextPage. This will keep running until it hits a page contains less then 500 models. Hopefully, that'll be the last page. By providing the second parameter to find, Ember should trigger a request to /structure?page=2. Inversely, you could do all of this in the route, if you don't mind the slow load time.
If at all possible, I would suggest modifying your API to add some pagination meta data to your request. Then you can use that metadata to control when to stop the recursive function. You can see how to handle metadata here.
Finally, I'm not sure if that's a typo in your json, but you may need to override your pluralization.
Anywho, hope that helps and I didn't overly simply the problem!
I really don't like this solution, but this does work. Please post if you have a much cleaner way of doing this.
Step 1: Load the Data into Ember Data
Since the data wasn't being loaded into Ember Data for the other pages I had to manually load it. I did that by adjusting the findWithURL function I created above.
findWithURL: function(url, page) {
var that = this;
var completeUrl = url + "?page=" + page;
var nextPage = page + 1;
var store = EditUserApp.__container__.lookup('store:main');
return this.ajax(completeUrl, 'GET').then(function(data) {
if (data.structures.length > 0){
that.findWithURL(url, nextPage);
}
store.pushPayload('structure', data);
return data;
});
},
I feel like there should be a cleaner way to do this, but it works.
Step 2: Rebuild the relationships
For some reason it didn't seem to be rebuilding the child/parent relationships. To take care of that I had to use the didLoad callback inside of the Structure model.
didLoad: function() {
var parent = this.get('parent');
if (parent) {
var that = this;
parent.get('children').then(function(children) {
children.addObject(that);
});
}
},
Any suggestions for how to improve this solution are welcome. Ideally I feel like there should be a better Ember way to handle this whole scenario.
On the Ember MVC TodoApp there is an option "Clear all Completed".
I've been trying to do a simple "Clear All".
I've tried multiple things, none of them work as I expected (clearing the data, the local storage and refreshing the UI).
The ones that comes with the sample is this code below:
clearCompleted: function () {
this.filterProperty(
'completed', true
).forEach(this.removeObject, this);
},
My basic test, that I expected to work was this one:
clearAll: function () {
this.forEach(this.removeObject, this);
},
Though, it's leaving some items behind.
If I click the button that calls this function in the Entries controller a couple times the list ends up being empty. I have no clue what's going on! And don't want to do a 'workaround'.
The clearCompleted works perfectly by the way.
The answer depends on what you really want to know-- if you want to clear an ArrayProxy, as per the question title, you just call clear() on the ArrayProxy instance e.g.:
var stuff = ['apple', 'orange', 'banana'];
var ap = Ember.ArrayProxy.create({ content: Ember.A(stuff) });
ap.get('length'); // => 3
ap.clear();
ap.get('length'); // => 0
This way you're not touching the content property directly and any observers are notified (you'll notice on the TodoMVC example that the screen updates if you type Todos.router.entriesController.clear() in the console).
If you're specifically asking about the TodoMVC Ember example you're at the mercy of the quick and dirty "Store" implementation... if you did as above you'll see when you refresh the page the item's return since there is no binding or observing being done between the entry "controller" and the Store (kinda dumb since it's one of Ember's strengths but meh whatev)
Anywho... a "clearAll" method on the entriesController like you were looking for can be done like this:
clearAll: function() {
this.clear();
this.store.findAll().forEach(this.removeObject, this);
}
Well, this worked:
clearAll: function () {
for (var i = this.content.length - 1; i >= 0; i--) {
this.removeObject(this.content[i]);
}
},
If someone can confirm if it's the right way to do it that would be great!