Ember 2.10, updating component on array pushObject - ember.js

I have two components that should both reflect the same data (testing d3 in ember)
One of the components adds a node to my state and also lists those nodes. The state is an array and I believe I am correctly calling pushObject in order to notify everything that there are updates.
The other is going to be a d3 thing so nothing is being rendered by the hbs file and I need to be notified when the array is modified so I can call the appropriate d3 functions and rerender my force graph.
I setup a minimal twiddle here: https://ember-twiddle.com/d4aae25e4a63636a97ed78b0b0081227
Basically, when you press add node: it adds a node to the list so I know some event is being fired however, my draw function in the "twiglet-graph" component is not being called.
To see this in action, goto the fiddle and press "Add". When you add another node, it will correctly list two nodes on the top part but it never changes the length in the bottom component to 2. I setup a click event that will alert you of the length of that component's this.nodes and clicking after adding shows a length of 2. How do I hook into the update so I can redraw my force graph?
Thanks.

By design, adding or removing objects from an array does not trigger the didUpdateAttrs hook. Instead you need to use notifyPropetyChange method.
See link for more details:
http://discuss.emberjs.com/t/didupdateattrs-not-called-on-array-modifications/10046

Related

Web Browser Events using MsHTML.h

I am using cwebpage integrated into my program. CWebpage information can be found here:
https://www.codeproject.com/Articles/3365/Embed-an-HTML-control-in-your-own-window-using-pla
My question is regarding events. I currently have this setup to setup click events using get_anchors() in IHTMLDocument2. I then iterate over all of the elements to create a IDispatch in memory. This holds the event information. When an item is clicked, it sends a WM_NOTIFY to the window and then I can handle the event and parse out what I need to parse from the element that was selected.
This all works fine until I run into a page in my software with close to 50,000 anchor tags in which we run out of memory since we hold the events in memory until the the page is destroyed.
Is there a simple way to obtain the clicked element without having to set an event for each individual element? Is it possible to set a click event at a document level and then find the element that tripped it? All I am trying to do is obtain the id of the element that is clicked.
What I've tried:
I tried to just use a WM_LBUTTONDOWN message read in our browser window and then use htmlDoc2->elementFromPoint() to simply get the information that I need from the element selected. This however does not work well if the page is zoomed or wraps.
Please note this programming is in C/C++, not javascript or vb.
Thank you.
HTML events "bubble" from child elements to parent elements. So, you can simply assign a single onClick handler to the IHTMLDocument2 itself, and then use the srcElement property of the IHTMLEventObj object that is given to your handler every time on onClick event is fired by any child element on the page. See Understanding the Event Model.

Oracle APEX Cards Tooltip

I have a classic report with cards. I want to display a value when the user mouseover any of the cards. How can I do that?
One method might be to add a value to card modifiers column, then run a Dynamic Action after refresh of your region, that would execute the following JS (fire on initialisation).
The first jQuery selector is driven by your card modifier value - I used 'titleA'
$('.titleA a').attr('title','Help me');
This should modifer your generated HTML accordingly
There are three mouse related dynamic actions you can use without having to write any JavaScript:
Mouse Enter (mouseenter) - Fires once when the pointing device is moved into the triggering element.
Mouse Leave (mouseleave) - Fires once when the pointing device is moved away from the triggering element.
Mouse Move (mousemove) - Fires when the pointing device is moved while it is over the triggering element.
Docs here.

Ember: Call a component action from a controller

I have a component working pretty well and now I need to call it inside a controller.
Scenario: I have an ember application, and I have an update button controller, I did a component that just display a toast(Materializecss) with some message I pass as parameter to the component and both the button and the toast are working well separately. I need to call inside the button controller this component to display to the user if the update was successfully or not using this component I did. Any sugestion of how can I call this component inside the controller? Thanks
have a look at the ember-twiddle I created and see if it fits the bill, in regards to what you want to do ?
You should instead of thinking "calling the component", rather, how can I push updated attributes/data to the component.
Ember relies on the "Data Dow Actions Up" pattern. This implies that you cannot make an explicit call to a component action from a controller. (see https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up for example)
Instead, a better design should be to define a service to manage data : messages to be "toasted". Then make this service available by injecting in in your controller. You will be able to call methods to register a new messages and generate new data.
Provide also a component template (to be included in your own templates) that will be in charge to display the new message, etc. Each change in the data managed by the service will lead to a component template update.
You should definitely take a look to https://www.npmjs.com/package/ember-toastr

Adding a Gtk::Grid repeatedly to a Gtk::Box

I have a Window object which contains only a grid. I want to use Gtk::Builder to get a pointer to the grid, and then use some Gtk::Box's Gtk::Box->pack_end() to add the grid to it many times (with manipulated contents each time).
Though each time that pack_end() is called I get:
gtk_box_pack: assertion 'gtk_widget_get_parent (child) == NULL' failed in my terminal and nothing gets added to the box.
What should I do?
Thanks
* EDIT:
Goal:
I want entries of a DB table to be put into a fancy widget for each record, though all the records being shown vertically one after the other. I thought I can create the fancy widget as a window in Glade and use Gtk::Builder to get a pointer to it. So in the fancy's Glade file I have a window containing a grid that has my custom appearance. I get the above error when I try to add the pointer to the fancy *grid*, to the visible window's Box. I hope I'm clear.
Here's the solution to gtk_box_pack: assertion 'gtk_widget_get_parent (child) == NULL' failed:
All that needs to be done at the first place is that you should draw the widgets WITHOUT a window, so when loaded with builder, it won't have a parent and thus the assersion succeeds.
Though here's another point: When I add the first instance of the grid to the Box, the second one results in the same error again. After a couple of trials and errors I realized that in each interation you should use Gtk::Builder::create_from_file() to create a new parent-less instance of the grid to be able to use, and this way it works.
There has to be a great difference in performance, in case number of records is gonna be big, but Gtk::Widget's copy constructor is private and direct copying is not possible, and since it wasn't my main obsession I didn't insist on resolving this "performance" issue.

Ember.js textField change event

I just start to learn ember.js
Why this code http://jsfiddle.net/alexchetv/RVNzP/ don't work properly -- App.MyTextField.change() execution is triggered only after MyTextField loses focus?
Alternative code with the same functionality works as expected.
Keep in mind that handlers on your Ember.Views (change, select, click, etc) are bound to normal HTML DOM events. "onchange" only gets called on an input field when the field loses focus and has changed, not any time the value is modified. You should observe 'value' if you want to be notified of changes to the displayed value.
Here's a working solution.
What I've done is made formDirty a computed value, which recomputes upon changes in the input. Ember, unlike the native "change" event, updates the the Input's value on each keystroke (copy/paste event etc).
Ember's binding makes sure the peopleController is always updated with the input value, thus also updating the computed field formDirty.
Note that if you add more inputs, you must tell the computed property to listen to its events, e.g.
formDirty: function() {
return !Ember.empty(this.get('fName')) && !Ember.empty(this.get('lName'));;
}.property('lName', 'fName').cacheable() // <- dependencies
cacheable() is used for performance sake only, meaning don't computed again until the dependencies change.