How can I add onClick for icon when it has link true ?
<Input size='huge' icon={{ name: 'plus', circular: true, link: true }} placeholder='Add...' />
You should try like this :
icon={{ name: 'eye', circular: true, link: true, onClick:(props.iconClicked) }}
Related
Using the Ember addon ember-bootstrap I can make a set of radio buttons like this :
{{form.element controlType="radio" label="Fruit Type" property="radio" options=radioOptions optionLabelPath="label"}}
with a Controller that looks like this :
export default Controller.extend({
init() {
this._super(...arguments);
this.radioOptions = [
{
label: 'Citrus',
value: 'C',
inline: true
},
{
label: 'Non-Citrus',
value: 'N',
inline: true
}
];
}
});
The relevant doco is here https://www.ember-bootstrap.com/#/components/forms .
However what I can't do is provide a custom value to each radio button so that I end up with rendered HTML like this :
<label>Citrus</label>
<input type="radio" value="C">
<label>Non-Citrus</label>
<input type="radio" value="N">
I have looked at "Custom Controls" on https://www.ember-bootstrap.com/#/components/forms but I can't see how that applies to this case.
EDIT: Just to be clearer about why I want to do this I want to display the readable label (eg "Citrus") but have the non-readable value ("C") available to send back to the server (because the server thinks in terms of "C" or "N".
It's not essential I could send "Citrus" back and map it around on the server but I just thought this would be very straightforward.
Looking at the part of the doco starting with "You can also just customize the existing control component:" on https://www.ember-bootstrap.com/#/components/forms it does seem like you should be able to do the sort of thing I'm after but the example shown doesn't address the use of a value attribute and I can't figure out how to .
You don't need to have the HTML rendered like that. if you want to access the checked radio, simply it is the property name dot value like radio.value.
Here how to get it in the on submit action:
actions: {
onSubmit() {
alert(this.radio.value)
}
}
I had exactly the same issue but I finally solved it. You have to use form.element in block mode. Why is it also necessary to also write an action to update the value? I have no idea!
In my implementation, I'm using Ember changesets and my property is called usageType. I hope it's clear enough to adapt for your needs.
I'm also using Ember Truth Helpers, which is what the {{eq opt.value el.value}} part is. It sets checked to true if the input value is equal to the current-selected value.
# my-component.js
actions: {
selectUsageType(option) {
return this.set('changeset.usageType', option);
}
}
# usage-type-options.js (imported in component JS)
[{
label: 'First label',
value: 'A'
},
{
label: 'Second label',
value: 'B'
}]
# Etc.
# my-component.hbs
# I'm not using angle-bracket invovation here, oops
{{#form.element
property="usageType"
label="My label" as |el|
}}
{{#each usageTypeOptions as |opt|}}
<div class="form-check">
<input
type="radio"
class="form-check-input"
id="{{el.id}}-{{opt.value}}"
checked={{eq opt.value el.value}}
onchange={{action "selectUsageType" opt.value}}
>
<label for="{{el.id}}-{{opt.value}}" class="form-check-label">
{{opt.label}}
</label>
</div>
{{/each}}
{{/form.element}}
I've added a few custom fields in lib/modules/apostrophe-custom-pages/index.js
Specifically, I've added a field for an excerpt, image Singleton for a cover image and another Singleton that will allow users to define an icon to a page.
This is how these images are defined:
{
name: 'icon',
label: 'Icon',
type: 'singleton',
widgetType: 'apostrophe-images',
options:{
limit: 1,
minSize: [200,200],
aspectRatio: [1,1],
},
controls:{
movable:false
},
image: true
},
{
name: 'coverimg',
label: 'Header Image',
type: 'singleton',
widgetType: 'apostrophe-images',
options:{
limit: 1,
minSize: [400,400],
aspectRatio: [1,1],
},
controls:{
movable:false
},
image: true
}
The cover image and the icon I can retrieve while on the page by using: {% set coverimage = apos.images.first(data.page.coverimg) or null %} ,
however, I can't reach the icon in the navigation under data.home._children like so:
{%- for tab in data.home._children -%}
{%- set iconImg = apos.images.all(tab.icon) %}
{{ apos.log(tab) }}
<li>
<a class="sidebar-main-link
{% if data.page and (apos.pages.isAncestorOf(tab, data.page) or tab._id == data.page._id) %}
active
{% endif %}
" href="{{ tab.slug }}">
<div class="icon" style="
backgroung-image: url('{{ apos.attachments.url(image.attachment, { size: 'full'}) }}') "></div>
{{ tab.title }}
</a>
</li>
{% endfor %}
This returns the standard missing.svg image
There is a new tutorial on the apostrophe documentation site which covers this issue in detail.
The short answer is that you must configure the filters option of the apostrophe-pages module to load related pages with more than just very basic information. For performance reasons, this default behavior is not a bad thing, but asking Apostrophe to load just one widget won't slow things down too much.
// in lib/modules/apostrophe-pages/index.js
module.exports = {
// other configuration, then...
filters: {
ancestors: {
children: {
areas: [ 'thumbnail' ]
}
}
}
};
I have an Ember component that I want to dynamically disable/ enable. Initially I have:
//template.emblem
= input type="text" disabled=true placeholder="Account Number" class="form-control"
When I have disabled=false, it enables the button again. Now I want to make it dynamic. I thought of creating a simple function that returns true or false inside component.js:
//component.js
export default Ember.Component.extend({
...
disableButton(){
return true
},
//template.emblem
= input type="text" disabled=disableButton placeholder="Account Number" class="form-control"
This disables it. However, when I switch disableButton to return false, it is still disabled.
How can I connect the disabled to a function/ property inside component.js?
The template.emblem and component.js folder hierarchy is:
components
|-my-awesome-component
|- template.emblem
|- component.js
Set a property on your component.js and bind it to "disabled" on the input tag in your template. Then you can call the action with your button and set the property to true or false using this.set().
//component.js
import Ember from 'ember';
export default Ember.Component.extend({
disableButton: false,
actions: {
disableButton(){
this.set('disableButton', true);
}
}
});
//template.hbs
<button {{action 'disableButton'}}>Click me</button>
{{input type="text" placeholder="Account Number" class="form-control" disabled=disableButton}}
Can I and should i pass arrays to components in ember?
For example if I wanted to template something that renders a couple of radiobuttons with labels:
<label for="media">Media</label><input type="radio" name="entry.1602323871" value="media" id="media" />
<label for="guest">Guest</label><input type="radio" name="entry.1602323871" value="guest" id="guest" />
Could I somehow pass an array with this content and loop through it.
Media, media
Guest, guest
Yeah, You can pass anything to components. Just a try to the radio-buttons
//Basic radio Component
App.RadioButton = Ember.Component.extend({
tagName : "input",
type : "radio",
attributeBindings : [ "name", "type", "value", "checked:checked" ],
click : function() {
this.set("selection", this.$().val());
},
checked : function() {
return this.get("value") === this.get("selection");
}.property('selection')
});
Em.Handlebars.helper('radio-button',App.RadioButton);
Updated (component name should be dasherized)
Working Radio Demo
It's now a tiny bit easier to get radio-buttons into your project (if you're using ember-cli) by using the ember-radio-buttons addon
Install:
npm install ember-radio-buttons --save-dev
Usage:
{{radio-button value='one' checked=selectedNumber}}
{{radio-button value='two' checked=selectedNumber}}
Upped #selva-G's answer.
I found that using the ButtonGroup Component from Bootstrap-for-Ember is actually cleaner.
Here's what I've done:
In my view's template:
<script type="text/x-handlebars" data-template-name="myview">
{{bs-btn-group contentBinding="things" selectedBinding="selectedThing"}}
</script>
In that view's controller (which doesn't necessarily need to be an ArrayController, rather can be a generic Ember Controller):
App.MyviewController = Ember.ArrayController.extend({
things: [
Ember.Object.create({value: 'first', title: 'First Thing'}),
Ember.Object.create({value: 'second', title: 'Second Thing'}),
Ember.Object.create({value: 'third', title: 'Third Thing'})
],
selectedThing: 'second'
selection: function() {
console.log(this.get('selectedThing');
}.observes('selectedThing')
});
I've got two date pickers in one form. They have different id's so this shouldn't be related to similar errors such as this one.
jQuery. Apply selector to every field in a dynamic form
The error I'm getting in firebug is
'uncaught exception: Missing instance data for this datepicker'
Which is triggered when I select a day from the '#copyTo' datepicker which is the second datepicker on the form. The first datepicker works perfectly.
The form I have is
<form name="copy" action="copyEvents.php" method="post">
<input type="hidden" id="copyFromHid" name="copyFromHid"/>
<input type="hidden" id="copyToHid" name="copyToHid"/>
Copy From <input id="copyFrom" name="copyFrom"/>
Copy To <input type="text" id="copyTo" name="copyTo"/>
<input type="hidden" name="gid" id="gid"/>
<input type="submit" value="copy"/>
</form>
The jquery is
jQuery('input#copyFrom','div#copyFromHistory form')
.datepicker({
altField: 'input#copyFromHid',
altFormat: 'yy-mm-d',
dateFormat: 'd MM yy',
firstDay: 1,
beforeShowDay: function(date) {
return (date.getDay() == 1) ? [true, ""] : [false, ""]; }
});
jQuery('input#copyTo','div#copyFromHistory form')
.datepicker({
altField: 'input#copyToHid',
altFormat: 'yy-mm-d',
dateFormat: 'd MM yy',
firstDay: 1,
beforeShowDay: function(date) {
return (date.getDay() == 1) ? [true, ""] : [false, ""]; }
});
Any suggestions as to why the first field would work, but not the second?
Easy to solve, change your code to something like this:
$('.date').live('focus', function(){
$(this).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1930:'+(new Date).getFullYear()
});
});
Two things come to mind:
One is in your jQuery selectors:
jQuery('input#copyFrom','div#copyFromHistory form')
jQuery('input#copyTo','div#copyFromHistory form')
In both cases you pass the context/ownerDocument parameter to jQuery() but that is looking for DOM element or document... not a string.
And the second thing is:
Copy From <input id="copyFrom" name="copyFrom"/>
Copy To <input type="text" id="copyTo" name="copyTo"/>
Copy To has type="test" and Copy From does not (though the default input type is text... so probably not that)
I suspect you really want:
jQuery('input#copyFrom').datepicker(....)
jQuery('input#copyTo').datepicker(....)