We have a page in ember js which has multiple menus. When you click on an icon the menu should open and when you click on a close button it should close. The only problem is that when you click one and then a second one, they are both open at the same time but what we want is for only one to be open at a time. any suggestions on how to fix this?
{{#if showMenu}}
<div> Menu items </div>
{{/if}}
showMenu(){
this.set('showMenu', true);
},
hideMenu(){
this.set('showMenu', false);
},
IMHO use the eq helper from ember-truth-helpers
then basically this js:
#tracked openMenu = null;
showMenu(name){
this.openMenu = name;
},
hideMenu(){
this.openMenu = null;
},
and this hbs:
<button {{on "click" (fn this.showMenu 'menuOne')}}>show one</button>
{{#if (eq this.openMenu "menuOne")}}
show menu 1
{{/if}}
<button {{on "click" (fn this.showMenu 'menuTwo')}}>show two</button>
{{#if (eq this.openMenu "menuTwo")}}
show menu 1
{{/if}}
<button {{on "click" this.hideMenu}}>close all</button>
Related
I have an odd conundrum.
It appears that when an element is hidden by a focus-out event ember is unable to attach the corresponding click event that triggered the focus out properly. For example with the code below if the <a> tag triggers the focus-out event on the input and the code behind turns _focused to false then the selectOpts event is never triggered. It appears to only happen if the a tag is hidden as a result of the focus-out.
Also oddly it does not matter how the a tag is hidden either if i do just display:none it still also doesn't fire the selectOpt action.
Here is my code:
<div class="dropdown">
{{input value=value class='form-control' focus-in="focused" focus-out="unfocused" }}
{{#if _focused}}
<ul class='dropdown-menu'>
{{#each _filteredOptions as |opt|}}
<li><a href="#" {{action "selectOpt" opt}}>{{opt}}</a></li>
{{/each}}
</ul>
{{/if}}
</div>
Here is a ember twilldle showing the issue.
https://ember-twiddle.com/6bbdb669d19d7a498e645bb0297f1b46?openFiles=templates.components.input-autocomplete.hbs%2Ctemplates.components.input-autocomplete.hbs
In order to get it to show the issue focus in on the text area and then try to select one of the links that appear below the input. What is supposed to happen is that when you select the link it is to populate the input field with the value.
You can use just focus-in instead of both focus-in and focus-out. So when you click on input focus-in event trigger and set _focused to true. Then, in action selectOpt you set value and after that set property _focused to false.
<div class="dropdown">
{{input value=value class='form-control' focus-in='focused' }}
{{#if _focused}}
<ul class='dropdown-menu'>
{{#each options as |opt|}}
<li>
<a href="#" {{action "selectOpt" opt}}>{{opt}}</a>
</li>
{{/each}}
</ul>
{{/if}}
input-autocomplete.js
actions: {
focused() {
this.set('_focused', true);
},
selectOpt(opt) {
console.log(opt);
this.set('value', opt);
this.set('_focused', false);
}
}
I didn't include all code for input-autocomplete it's the same as before exxept actions. Also I used options array insted your filter because didn't get any results when clicked on input.
well i need to insert a component when the user click on button, my code:
dash.hbs
<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>
dash.js //controller
actions:{ solisXTax(){ "theCode" }, }
and my componenet is ember-chart,
{{ember-chart type="Bar"
data=solsGraph
width=500 height=350
options=opcionesGrafica
legend=true}}
Thanks
I don't know if you are familiar with the handlebars conditionals, but you should read more about that in the guides
You can use a conditional like so:
//templates/application.hbs
<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>
<hr/>
{{#if componentVisible}}
{{ember-chart}}
{{else}}
no component shown
{{/if}}
with the corresponding action in your controller
//controllers/application.js
export default Ember.Controller.extend({
componentVisible: false,
actions:{
solisXTax(){
this.toggleProperty('componentVisible')
}
}
});
Here is a twiddle that showcases using an if statement to toggle your component.
You could also dynamically toggle between different components, where one could be a empty component, but that might be overkill for your use case.
I have a template that allows me to edit settings of a user. Within the usersettings my model is the actual user. And I have a 1-N Relationship between User-Settings:
{{#if isEditing}}
<button {{action 'doneEditing'}}>Done</button>
{{else}}
<button {{action 'edit'}}>Edit</button>
{{/if}}
<h1>Settings</h1>
{{#each this.setting}}
{{#if isEditing}}
{{name}}: {{view Ember.TextField valueBinding='value'}}
{{else}}
{{name}}: {{value}}
{{/if}}
{{/each}}
The problem is that if I click the Edit button, the "Edit" status is only coming to main controllere here. So my Buttons change, but within the loop, the Textfield is not appearing.
App.UserController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function(){
this.set('isEditing', true);
},
doneEditing: function(){
this.set('isEditing', false);
},
}
});
(I don't have a specific controller for the SettingItems in my Loop)
How do I handle such a case?
Yeah, you definitely can do it.
http://emberjs.jsbin.com/uwENUbeh/3/edit
Is there a way to refactor the following code to make it cleaner or is a {{#if}} the cleanest way to solve this?
{{#if isDirty}}
<button {{action 'save' this}} class="btn">Save</button>
<button {{action 'discard' this}} class="btn">Discard</button>
{{else}}
<button class="btn disabled">Save</button>
<button class="btn disabled">Discard</button>
{{/if}}
I prefer to solve this with CSS:
<button {{bindAttr class=":btn content.isDirty:enabled:disabled"}}>Save</button>
You could use CSS to prevent the clicks when disabled (if your target browsers support it). Or just let the clicks go through and only call commit/rollback if content.isDirty.
Another option would be to bind the disabled property of the button:
<button {{bindAttr disabled="content.isDirty:enabled:disabled"}}>Save</button>
Hi there i have a small question that belonging to my small ember application.
JSFiddle upload is here. I used bootstrap accordion to visualize my tickets. When i click on the "click" it adds another accordion into my view. But sadly it cannot be opened or used. Every accordion i dynamically created cannot be opened or closed. There is no error or exception thrown and from my point of view everything should work fine. My click-function looks like this:
click: function() {
this.counter++,
name = this.name+this.counter.toString(),
tre = App.Ticket.create({
Text: "try",
id: name
});
this.pushObject(tre);
}});
The belonging html is here:
<div class="accordion-group">
{{#each content}}
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="id"}}>
Ticket ID/Störfall
</a>
</div>
<div {{bindAttr id="id"}} class="accordion-body collapse in ">
<div class="accordion-inner">
{{Text}}
</div>
</div>
{{/each}}
</div>
I hope you can help me.
You can add an action helper to the accordion link title
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2"
{{bindAttr href="item.id"}}
{{action "click" item target="view"}}>
Ticket ID/Störfall
</a>
Then implement a click handler event in your view
App.TicketView = Em.View.extend({
click:function(context) {
var el = this.$('a[href='+context.get('id')+']');
el.toggleClass('collapsed');
this.$('#'+el.attr('href')).toggleClass('in');
}
});
Here's a working fiddle