I am trying to detect events on table cells. I have found that I can receive the events when I use the {{action}} helper, but not when I define an event method on the view. Here is an example:
http://jsfiddle.net/9nWNQ/1/
Clicking the text "No action" should log a message, but it doesn't.
You might ask why I don't just use the action? The problem is that I want to detect multiple events and according to https://github.com/emberjs/ember.js/issues/569 I need to use a view.
I don't know why, but if you define your view as a by setting tagName: 'tr', it seems to work. http://jsfiddle.net/Sly7/ACzrY/#base
Perhaps your code produce an invalid html page, and the the click event is not triggered
Update: http://jsfiddle.net/Sly7/pX8ww/
I've replace the view tag with 'td' to behave more like the example
Related
I have the following structure of fields in a form within an Ember app:
<div class="box">
<label>Name</label>
{{text-input value=model.name}}
</div>
<div class="box">
<label>Gender</label>
{{chosen-select value=model.gender content=selectOptions.genders}}
</div>
The text-input tag refers to a component that inherits from Ember.TextField. The chosen-select tag refers to another component that inherits from Ember.Select. One of the behaviors provided by chosen-select is that it converts the <select> element into a chosen select for better user interaction.
After doing that, I wanted to give the focus to any input field (textfield or select) whenever the user clicked anywhere in the field's surrounding box, not just on the field or its label. I was able to do it successfully with the text input fields, using the code below (pure jquery, no ember was needed here):
$(document).on 'click', '.box', ->
$(this).find('input').focus()
By attaching the click event handler to the document, I'm able to catch clicks on .box elements that do not exist at the time this event handler is declared. The result is that whenever a .box element is clicked, the text input field inside it (if any), gets the focus.
Achieving it for selects too
I wanted to achieve the equivalent behavior for .box elements containing a chosen select, which is to have the dropdown from the select being open programmatically when the surrounding .box is clicked.
According to chosen's options documentation, if we want to programmatically instruct a chosen control to open its dropdown, we must sent it the chosen:open event, so this is what tried, adding it to the code above:
$(document).on 'click', '.box', ->
$(this).find('input').focus()
$(this).find('select').trigger('chosen:open')
And it does not work. It does not give any errors either. I then noticed that if I issued that last line from the browser's js console it works (substituting this with a reference to a .box element, of course). When issued from the console, the corresponding select inside that box opens its dropdown. But when issued from the click event handler above it does not work.
So I figured I needed to issue this command not directly in that context, but using some of Ember's Ember.run functions, like Ember.run.next and some others. But I've had no luck, and I've tried all sorts of things, even triggering the event after a small delay.
I was hoping that someone here with some Ember.js expertise could shed some light on this problem. I assume the problem is when ember, because if I get an equivalent html with no ember (from the front-end designer that gave me the html I'm working with) the thing works flawlessly from the click event too.
I'm trying to handle a form submit within a modal component seen here http://emberjs.jsbin.com/oPEpuQiv/1/edit. That code is a modified version of the Emberjs cookbook docs example seen here http://emberjs.jsbin.com/iluLOto/1/edit.
As you can see in that jsbin, nothing happens when you try to submit the form after opening the modal. If you remove the on="submit", the form action occurs, but likely because of a click or some other event. Am I missing something? Is it something to do with the component? It seems this example (http://jsbin.com/eQOZoGe/3/edit) works fine, and that's just a normal form.
I can't give an exact answer, I'm still investigating, but it's related to having actions in the component's templates
http://emberjs.jsbin.com/oPEpuQiv/15/edit
Is there any reason you don't want to use the action on the button?
I'm working on a events board app. Events are displayed in columns at the height matching the start time and pack into the space if there is more then one overlapping. Each event is a view and I want to have a div next to the view that shows and hides on hover.
I know how to bind to mouseEnter and mouseLeave to show and hide part of the template but I want to show something adjacent to my view/template not within it.
I've already got some computed properties on the view to place the event with the correct height and width so I don't want to add the popover inside the view.
Here is something to mess with http://jsbin.com/osoner/1/edit
Seems like something simple but I want to make sure I'm doing things the Ember way.
After messing a little with your provided jsbin, here the results.
Basically what I've done was adding a new popup css declaration wich do position the popup so that it appears outside the parent view, and also moved the {{#if...}} helper into the originating view.
If you want to go more fancy, checkout this jsfiddle wich uses the twitter boostrap popover.
Hope it helps.
My view contains an element. What is the best way to respond to mouseEnter and mouseLeave events for only that element?
Does ember want me to convert that element into a view?
Does ember want me to call this.$().on('mouseEnter', '.my-child-element', someHandler) and .off it myself in didInsertElement and willDestroyElement respectively?
Or am I missing a more appropriate approach?
There are several ways to approach this, but I always come to the conclusion that you create a view for anything that needs to respond to events. You could also use an action handler for very simple events in a template.
{{action "my_action" on="mousedown"}}
I would still recommend using a view though as you will most likely need to know more info about what happened and want access to the view and models bound to that element.
Do action handlers not work directly on view instances?
Instead of attaching an action handler within the view, I want to attach it directly on the entire view itself.
Sample jsFiddle: http://jsfiddle.net/t3wdG/
UPDATE:
My goal is to delegate to specific functions (undo, redo in this case) on the parentView. The reason I have the buttonView is because on click on each button, I want to do something to it, for example add a css class to it.
So in effect, I want all my buttons to add a class to themselves on click and then delegate to separate functions on the parent view.
Is this possible using this approach?
Here is the updated jsFiddle: http://jsfiddle.net/xvkgk/
Ok, I don't think there is a built in ember way to do that, but check this jsfiddle, it seems work as you expect: http://jsfiddle.net/xvkgk/8/
The recommended solution is to make a custom view subclass. You can then add a click function the subclass that will handle click events automatically.