Ember.LinkComponent Class
Ember.LinkComponent
renders an element whose click
event triggers a
transition of the application's instance of Ember.Router
to
a supplied route by name.
Ember.LinkComponent
components are invoked with {{#link-to}}. Properties
of this class can be overridden with reopen
to customize application-wide
behavior.
Item Index
Methods
- $
- _invoke
- _lazyInjections
- _onLookup
- _scheduledDestroy
- addObserver
- append
- appendTo
- beginPropertyChanges
- cacheFor
- decrementProperty
- destroy
- didReceiveAttrs
- didRender
- didUpdate
- didUpdateAttrs
- endPropertyChanges
- findElementInParentElement
- get
- getChildViews
- getProperties
- getRootViews
- getViewBoundingClientRect
- getViewBounds
- getViewClientRects
- getViewElement
- getViewId
- getViewRange
- getWithDefault
- handleEvent
- has
- hasObserverFor
- incrementProperty
- init
- matches
- nearestOfType deprecated
- nearestWithProperty deprecated
- notifyPropertyChange
- off
- on
- one
- propertyDidChange
- propertyWillChange
- readDOMAttr
- removeObserver
- renderToElement deprecated
- reopen
- reopenClass
- replaceIn
- rerender
- send
- sendAction
- set
- setProperties
- toggleProperty
- toString
- trigger
- triggerAction
- willDestroy
- willRender
- willUpdate
Properties
- actions
- active
- activeClass
- ariaRole
- attributeBindings
- childViews
- classNameBindings
- classNames
- concatenatedProperties
- currentWhen
- currentWhen deprecated
- disabled
- disabledClass
- element
- elementId
- eventName
- href
- isDestroyed
- isDestroying
- isVisible
- layout
- layoutName
- loadingClass
- loadingHref
- mergedProperties
- parentView
- rel
- replace
- tabindex
- tagName
- target
- title
Methods
$
-
[selector]
component.$('li')
will return a jQuery object containing
all of the li
elements inside the DOM element of this component.
Parameters:
-
[selector]
String optionala jQuery-compatible selector string
Returns:
_invoke
-
event
Event handler that invokes the link, activating the associated route.
Parameters:
-
event
Event
_lazyInjections
()
Object
private
Returns:
_onLookup
()
private
_scheduledDestroy
()
private
destroy
method.
addObserver
-
key
-
target
-
method
context
parameter:
`
javascript
fooDidChange: function(sender, key, value, rev) { };
`
The sender is the object that changed. The key is the property that
changes. The value property is currently reserved and unused. The rev
is the last property revision of the object when it changed, which you can
use to detect if the key value has really changed or not.
If you pass a context
parameter, the context will be passed before the
revision like so:
`
javascript
fooDidChange: function(sender, key, value, context, rev) { };
`
Usually you will not need the value, context or revision parameters at
the end. In this case, it is common to write observer methods that take
only a sender and key value as parameters or, if you aren't interested in
any of these values, to write an observer that has no parameters at all.
append
()
Ember.View
private
rootElement
property, you must append
the view within that element. Rendering views outside of the rootElement
is not supported.
Note that this method just schedules the view to be appended; the DOM
element will not be appended to the document body until all bindings have
finished synchronizing.
Returns:
appendTo
-
A
appendTo
, be sure that
the target element you are providing is associated with an Ember.Application
and does not have an ancestor element that is associated with an Ember view.
Parameters:
-
A
String | DOMElement | JQueryselector, element, HTML string, or jQuery object
Returns:
beginPropertyChanges
()
Ember.Observable
private
endPropertyChanges()
to deliver the deferred change notifications and end
deferring.
Returns:
cacheFor
-
keyName
Parameters:
-
keyName
String
Returns:
decrementProperty
-
keyName
-
decrement
`
javascript
player.decrementProperty('lives');
orc.decrementProperty('health', 5);
`
Parameters:
-
keyName
StringThe name of the property to decrement -
decrement
NumberThe amount to decrement by. Defaults to 1
Returns:
destroy
()
private
destroy
on a view to destroy the view (and all of its
child views). This will remove the view from any parent node, then make
sure that the DOM element managed by the view can be released by the
memory manager.
didReceiveAttrs
()
public
didRender
()
public
didUpdate
()
public
didUpdateAttrs
()
public
endPropertyChanges
()
Ember.Observable
private
beginPropertyChanges()
at the beginning of the changes to defer change
notifications. When you are done making changes, call this method to
deliver the deferred change notifications and end deferring.
Returns:
findElementInParentElement
-
parentElement
elementId
(or the
view's guid if elementId
is null). You can override this method to
provide your own form of lookup. For example, if you want to discover your
element using a CSS class name instead of an ID.
Parameters:
-
parentElement
DOMElementThe parent's DOM element
Returns:
get
-
keyName
object[keyName]
or object.keyName
,
however it supports both computed properties and the unknownProperty
handler.
Because get
unifies the syntax for accessing all these kinds
of properties, it can make many refactorings easier, such as replacing a
simple property with a computed property, or vice versa.
### Computed Properties
Computed properties are methods defined with the property
modifier
declared at the end, such as:
`
javascript
fullName: Ember.computed('firstName', 'lastName', function() {
return this.get('firstName') + ' ' + this.get('lastName');
})
`
When you call get
on a computed property, the function will be
called and the return value will be returned instead of the function
itself.
### Unknown Properties
Likewise, if you try to call get
on a property whose value is
undefined
, the unknownProperty()
method will be called on the object.
If this method returns any value other than undefined
, it will be returned
instead. This allows you to implement "virtual" properties that are
not defined upfront.
Parameters:
-
keyName
StringThe property to retrieve
Returns:
getProperties
-
list
getProperties
with a list of strings or an array:
`
javascript
record.getProperties('firstName', 'lastName', 'zipCode');
// { firstName: 'John', lastName: 'Doe', zipCode: '10011' }
`
is equivalent to:
`
javascript
record.getProperties(['firstName', 'lastName', 'zipCode']);
// { firstName: 'John', lastName: 'Doe', zipCode: '10011' }
`
Parameters:
-
list
String... | Arrayof keys to get
Returns:
getRootViews
-
owner
Parameters:
-
owner
Object
getViewBoundingClientRect
-
view
getViewBoundingClientRect
provides information about the position of the
bounding border box edges of a view relative to the viewport.
It is only intended to be used by development tools like the Ember Inpsector
and may not work on older browsers.
Parameters:
-
view
Ember.View
getViewClientRects
-
view
getViewClientRects
provides information about the position of the border
box edges of a view relative to the viewport.
It is only intended to be used by development tools like the Ember Inspector
and may not work on older browsers.
Parameters:
-
view
Ember.View
getWithDefault
-
keyName
-
defaultValue
undefined
.
`
javascript
person.getWithDefault('lastName', 'Doe');
`
Parameters:
-
keyName
StringThe name of the property to retrieve -
defaultValue
ObjectThe value to return if the property value is undefined
Returns:
handleEvent
-
eventName
-
evt
Ember.EventDispatcher
Parameters:
-
eventName
String -
evt
Event
has
-
name
Parameters:
-
name
StringThe name of the event
Returns:
hasObserverFor
-
key
true
if the object currently has observers registered for a
particular key. You can use this method to potentially defer performing
an expensive action until someone begins observing a particular property
on the object.
Parameters:
-
key
StringKey to check
Returns:
incrementProperty
-
keyName
-
increment
`
javascript
person.incrementProperty('age');
team.incrementProperty('score', 2);
`
Parameters:
-
keyName
StringThe name of the property to increment -
increment
NumberThe amount to increment by. Defaults to 1
Returns:
init
()
private
An overridable method called when LinkComponent
objects are instantiated.
Example:
App.MyLinkComponent = Ember.LinkComponent.extend({
init: function() {
this._super(...arguments);
Ember.Logger.log('Event is ' + this.get('eventName'));
}
});
NOTE: If you do override init
for a framework class like Ember.View
,
be sure to call this._super(...arguments)
in your
init
declaration! If you don't, Ember may not have an opportunity to
do important setup work, and you'll see strange behavior in your
application.
matches
-
el
-
selector
Parameters:
-
el
DOMElement -
selector
String
nearestOfType
-
klass
Parameters:
-
klass
Class,MixinSubclass of Ember.View (or Ember.View itself), or an instance of Ember.Mixin.
Returns:
nearestWithProperty
-
property
Parameters:
-
property
StringA property name
Returns:
notifyPropertyChange
-
keyName
propertyWillChange
and propertyDidChange
in
succession.
Parameters:
-
keyName
StringThe property key to be notified about.
Returns:
off
-
name
-
target
-
method
Parameters:
Returns:
on
-
name
-
[target]
-
method
`
javascript
person.on('didLoad', function() {
// fired once the person has loaded
});
`
An optional target can be passed in as the 2nd argument that will
be set as the "this" for the callback. This is a good way to give your
function access to the object triggering the event. When the target
parameter is used the callback becomes the third argument.
Parameters:
Returns:
one
-
name
-
[target]
-
method
`one
` when
you only care about the first time an event has taken place.
This function takes an optional 2nd argument that will become the "this"
value for the callback. If this argument is passed then the 3rd argument
becomes the function.
Parameters:
Returns:
propertyDidChange
-
keyName
get()
or set()
on it. In this case, you can use this
method and propertyWillChange()
instead. Calling these two methods
together will notify all observers that the property has potentially
changed value.
Note that you must always call propertyWillChange
and propertyDidChange
as a pair. If you do not, it may get the property change groups out of
order and cause notifications to be delivered more often than you would
like.
Parameters:
-
keyName
StringThe property key that has just changed.
Returns:
propertyWillChange
-
keyName
get()
or set()
on it. In this case, you can use this
method and propertyDidChange()
instead. Calling these two methods
together will notify all observers that the property has potentially
changed value.
Note that you must always call propertyWillChange
and propertyDidChange
as a pair. If you do not, it may get the property change groups out of
order and cause notifications to be delivered more often than you would
like.
Parameters:
-
keyName
StringThe property key that is about to change.
Returns:
readDOMAttr
-
name
value
to the same value as before,
it will clobber selection state and cursor position. In other words,
setting an attribute is not **always** idempotent.
This method provides a way to read an element's attribute and also
update the last value Ember knows about at the same time. This makes
setting an attribute idempotent.
In particular, what this means is that if you get an <input>
element's
value
attribute and then re-render the template with the same value,
it will avoid clobbering the cursor and selection position.
Since most attribute sets are idempotent in the browser, you typically
can get away with reading attributes using jQuery, but the most reliable
way to do so is through this method.
Parameters:
-
name
Stringthe name of the attribute
Returns:
removeObserver
-
key
-
target
-
method
addObserver()
and your
target will no longer receive notifications.
renderToElement
-
tagName
BODY
element,
since this is the default context that views are rendered into when being
inserted directly into the DOM.
`
js
let element = view.renderToElement();
element.tagName; // => "BODY"
`
You can override the kind of element rendered into and returned by
specifying an optional tag name as the first argument.
`
js
let element = view.renderToElement('table');
element.tagName; // => "TABLE"
`
This method is useful if you want to render the view into an element that
is not in the document's body. Instead, a new body
element, detached from
the DOM is returned. FastBoot uses this to serialize the rendered view into
a string for transmission over the network.
`
js
app.visit('/').then(function(instance) {
let element;
Ember.run(function() {
element = renderToElement(instance);
});
res.send(serialize(element));
});
`
Parameters:
-
tagName
StringThe tag of the element to create and render into. Defaults to "body".
Returns:
reopen
()
public
`
javascript
const MyObject = Ember.Object.extend({
name: 'an object'
});
o = MyObject.create();
o.get('name'); // 'an object'
MyObject.reopen({
say(msg){
console.log(msg);
}
})
o2 = MyObject.create();
o2.say("hello"); // logs "hello"
o.say("goodbye"); // logs "goodbye"
`
To add functions and properties to the constructor itself,
see reopenClass
reopenClass
()
public
`
javascript
const MyObject = Ember.Object.extend({
name: 'an object'
});
MyObject.reopenClass({
canBuild: false
});
MyObject.canBuild; // false
o = MyObject.create();
`
In other words, this creates static properties and functions for the class.
These are only available on the class and not on any instance of that class.
`
javascript
const Person = Ember.Object.extend({
name: "",
sayHello() {
alert("Hello. My name is " + this.get('name'));
}
});
Person.reopenClass({
species: "Homo sapiens",
createPerson(newPersonsName){
return Person.create({
name:newPersonsName
});
}
});
let tom = Person.create({
name: "Tom Dale"
});
let yehuda = Person.createPerson("Yehuda Katz");
tom.sayHello(); // "Hello. My name is Tom Dale"
yehuda.sayHello(); // "Hello. My name is Yehuda Katz"
alert(Person.species); // "Homo sapiens"
`
Note that species
and createPerson
are *not* valid on the tom
and yehuda
variables. They are only valid on Person
.
To add functions and properties to instances of
a constructor by extending the constructor's prototype
see reopen
replaceIn
-
target
Parameters:
-
target
String | DOMElement | JQueryA selector, element, HTML string, or jQuery object
Returns:
rerender
()
public
appendChild
,
rerender
will remove them, because they will be added again
if needed by the next render
.
In general, if the display of your view changes, you should modify
the DOM element directly instead of manually calling rerender
, which can
be slow.
send
-
actionName
-
context
ActionHandler
. Any parameters
supplied after the actionName
string will be passed as arguments
to the action target function.
If the ActionHandler
has its target
property set, actions may
bubble to the target
. Bubbling happens when an actionName
can
not be found in the ActionHandler
's actions
hash or if the
action target function returns true
.
Example
`
js
App.WelcomeRoute = Ember.Route.extend({
actions: {
playTheme() {
this.send('playMusic', 'theme.mp3');
},
playMusic(track) {
// ...
}
}
});
`
Parameters:
-
actionName
StringThe action to trigger -
context
a context to send with the action
sendAction
-
[action]
-
[params]
`
javascript
// app/components/play-button.js
export default Ember.Component.extend({
click() {
if (this.get('isPlaying')) {
this.sendAction('play');
} else {
this.sendAction('stop');
}
}
});
`
The actions "play" and "stop" must be passed to this play-button
component:
`
handlebars
{{! app/templates/application.hbs }}
{{play-button play=(action "musicStarted") stop=(action "musicStopped")}}
`
When the component receives a browser click
event it translate this
interaction into application-specific semantics ("play" or "stop") and
calls the specified action.
`
javascript
// app/controller/application.js
export default Ember.Controller.extend({
actions: {
musicStarted() {
// called when the play button is clicked
// and the music started playing
},
musicStopped() {
// called when the play button is clicked
// and the music stopped playing
}
}
});
`
If no action is passed to sendAction
a default name of "action"
is assumed.
`
javascript
// app/components/next-button.js
export default Ember.Component.extend({
click() {
this.sendAction();
}
});
`
`
handlebars
{{! app/templates/application.hbs }}
{{next-button action=(action "playNextSongInAlbum")}}
`
`
javascript
// app/controllers/application.js
App.ApplicationController = Ember.Controller.extend({
actions: {
playNextSongInAlbum() {
...
}
}
});
`
Parameters:
-
[action]
String optionalthe action to call -
[params]
optionalarguments for the action
set
-
keyName
-
value
`
javascript
record.set("key", value);
`
This method is generally very similar to calling object["key"] = value
or
object.key = value
, except that it provides support for computed
properties, the setUnknownProperty()
method and property observers.
### Computed Properties
If you try to set a value on a key that has a computed property handler
defined (see the get()
method for an example), then set()
will call
that method, passing both the value and key instead of simply changing
the value itself. This is useful for those times when you need to
implement a property that is composed of one or more member
properties.
### Unknown Properties
If you try to set a value on a key that is undefined in the target
object, then the setUnknownProperty()
handler will be called instead. This
gives you an opportunity to implement complex "virtual" properties that
are not predefined on the object. If setUnknownProperty()
returns
undefined, then set()
will simply set the value on the object.
### Property Observers
In addition to changing the property, set()
will also register a property
change with the object. Unless you have placed this call inside of a
beginPropertyChanges()
and endPropertyChanges(),
any "local" observers
(i.e. observer methods declared on the same object), will be called
immediately. Any "remote" observers (i.e. observer methods declared on
another object) will be placed in a queue and called at a later time in a
coalesced manner.
Parameters:
-
keyName
StringThe property to set -
value
ObjectThe value to set ornull
.
Returns:
setProperties
-
hash
beginPropertyChanges
and endPropertyChanges
batch, so
observers will be buffered.
`
javascript
record.setProperties({ firstName: 'Charles', lastName: 'Jolley' });
`
Parameters:
-
hash
Objectthe hash of keys and values to set
Returns:
toggleProperty
-
keyName
`
javascript
starship.toggleProperty('warpDriveEngaged');
`
Parameters:
-
keyName
StringThe name of the property to toggle
Returns:
toString
()
String
public
toString
typically does, in a generic way for all Ember
objects.
`
javascript
const Person = Ember.Object.extend()
person = Person.create()
person.toString() //=> "`
If the object's class is not defined on an Ember namespace, it will
indicate it is a subclass of the registered superclass:
`
javascript
const Student = Person.extend()
let student = Student.create()
student.toString() //=> "<(subclass of Person):ember1025>"
`
If the method toStringExtension
is defined, its return value will be
included in the output.
`
javascript
const Teacher = Person.extend({
toStringExtension() {
return this.get('fullName');
}
});
teacher = Teacher.create()
teacher.toString(); //=> "`
Returns:
trigger
-
name
Ember.Evented
to
also call methods with the given name.
Parameters:
-
name
String
triggerAction
-
opts
action
with an actionContext
to a target
. The action, actionContext
and target will be retrieved from properties of the object. For example:
`
javascript
App.SaveButtonView = Ember.View.extend(Ember.TargetActionSupport, {
target: Ember.computed.alias('controller'),
action: 'save',
actionContext: Ember.computed.alias('context'),
click() {
this.triggerAction(); // Sends the save
action, along with the current context
// to the current controller
}
});
`
The target
, action
, and actionContext
can be provided as properties of
an optional object argument to triggerAction
as well.
`
javascript
App.SaveButtonView = Ember.View.extend(Ember.TargetActionSupport, {
click() {
this.triggerAction({
action: 'save',
target: this.get('controller'),
actionContext: this.get('context')
}); // Sends the save
action, along with the current context
// to the current controller
}
});
`
The actionContext
defaults to the object you are mixing TargetActionSupport
into.
But target
and action
must be specified either as properties or with the argument
to triggerAction
, or a combination:
`
javascript
App.SaveButtonView = Ember.View.extend(Ember.TargetActionSupport, {
target: Ember.computed.alias('controller'),
click() {
this.triggerAction({
action: 'save'
}); // Sends the save
action, along with a reference to this
,
// to the current controller
}
});
`
Parameters:
-
opts
Object(optional, with the optional keys action, target and/or actionContext)
Returns:
willDestroy
()
public
willRender
()
public
willUpdate
()
public
Properties
actions
Object
public
ActionHandler
as action targets.
These functions will be invoked when a matching {{action}}
is triggered
from within a template and the application's current route is this route.
Actions can also be invoked from other parts of your application
via ActionHandler#send
.
The actions
hash will inherit action handlers from
the actions
hash defined on extended parent classes
or mixins rather than just replace the entire hash, e.g.:
`
js
App.CanDisplayBanner = Ember.Mixin.create({
actions: {
displayBanner(msg) {
// ...
}
}
});
App.WelcomeRoute = Ember.Route.extend(App.CanDisplayBanner, {
actions: {
playMusic() {
// ...
}
}
});
// WelcomeRoute
, when active, will be able to respond
// to both actions, since the actions hash is merged rather
// then replaced when extending mixins / parent classes.
this.send('displayBanner');
this.send('playMusic');
`
Within a Controller, Route or Component's action handler,
the value of the this
context is the Controller, Route or
Component object:
`
js
App.SongRoute = Ember.Route.extend({
actions: {
myAction() {
this.controllerFor("song");
this.transitionTo("other.route");
...
}
}
});
`
It is also possible to call this._super(...arguments)
from within an
action handler if it overrides a handler defined on a parent
class or mixin:
Take for example the following routes:
`
js
App.DebugRoute = Ember.Mixin.create({
actions: {
debugRouteInformation() {
console.debug("trololo");
}
}
});
App.AnnoyingDebugRoute = Ember.Route.extend(App.DebugRoute, {
actions: {
debugRouteInformation() {
// also call the debugRouteInformation of mixed in App.DebugRoute
this._super(...arguments);
// show additional annoyance
window.alert(...);
}
}
});
`
## Bubbling
By default, an action will stop bubbling once a handler defined
on the actions
hash handles it. To continue bubbling the action,
you must return true
from the handler:
`
js
App.Router.map(function() {
this.route("album", function() {
this.route("song");
});
});
App.AlbumRoute = Ember.Route.extend({
actions: {
startPlaying: function() {
}
}
});
App.AlbumSongRoute = Ember.Route.extend({
actions: {
startPlaying() {
// ...
if (actionShouldAlsoBeTriggeredOnParentRoute) {
return true;
}
}
}
});
`
Default: null
active
Unknown
private
Accessed as a classname binding to apply the LinkComponent
's activeClass
CSS class
to the element when the link is active.
A LinkComponent
is considered active when its currentWhen
property is true
or the application's current route is the route the LinkComponent
would trigger
transitions into.
The currentWhen
property can match against multiple routes by separating
route names using the (space) character.
activeClass
String
public
The CSS class to apply to LinkComponent
's element when its active
property is true
.
Default: active
ariaRole
String
public
Default: null
attributeBindings
Array | String
public
By default the {{link-to}}
component will bind to the href
and
title
attributes. It's discouraged that you override these defaults,
however you can push onto the array if needed.
Default: ['title', 'rel', 'tabindex', 'target']
childViews
Array
private
Default: []
classNameBindings
Array
public
By default the {{link-to}}
component will bind to the active
, loading
,
and disabled
classes. It is discouraged to override these directly.
Default: ['active', 'loading', 'disabled', 'ember-transitioning-in', 'ember-transitioning-out']
classNames
Array
public
Default: ['ember-view']
concatenatedProperties
Array
public
classNames
property of Ember.View
.
Here is some sample code showing the difference between a concatenated
property and a normal one:
`
javascript
const Bar = Ember.Object.extend({
// Configure which properties to concatenate
concatenatedProperties: ['concatenatedProperty'],
someNonConcatenatedProperty: ['bar'],
concatenatedProperty: ['bar']
});
const FooBar = Bar.extend({
someNonConcatenatedProperty: ['foo'],
concatenatedProperty: ['foo']
});
let fooBar = FooBar.create();
fooBar.get('someNonConcatenatedProperty'); // ['foo']
fooBar.get('concatenatedProperty'); // ['bar', 'foo']
`
This behavior extends to object creation as well. Continuing the
above example:
`
javascript
let fooBar = FooBar.create({
someNonConcatenatedProperty: ['baz'],
concatenatedProperty: ['baz']
})
fooBar.get('someNonConcatenatedProperty'); // ['baz']
fooBar.get('concatenatedProperty'); // ['bar', 'foo', 'baz']
`
Adding a single property that is not an array will just add it in the array:
`
javascript
let fooBar = FooBar.create({
concatenatedProperty: 'baz'
})
view.get('concatenatedProperty'); // ['bar', 'foo', 'baz']
`
Using the concatenatedProperties
property, we can tell Ember to mix the
content of the properties.
In Ember.Component
the classNames
, classNameBindings
and
attributeBindings
properties are concatenated.
This feature is available for you to use throughout the Ember object model,
although typical app developers are likely to use it infrequently. Since
it changes expectations about behavior of properties, you should properly
document its usage in each individual concatenated property (to not
mislead your users to think they can override the property in a subclass).
Default: null
currentWhen
Unknown
public
Used to determine when this LinkComponent
is active.
currentWhen
Unknown
deprecated
private
disabled
Unknown
private
Accessed as a classname binding to apply the LinkComponent
's disabledClass
CSS class
to the element when the link is disabled.
When true
interactions with the element will not trigger route changes.
disabledClass
String
private
The CSS class to apply to a LinkComponent
's element when its disabled
property is true
.
Default: disabled
element
DOMElement
public
elementId
String
public
id
of the component's element in the DOM. You can provide this
value yourself but it must be unique (just as in HTML):
`
handlebars
{{my-component elementId="a-really-cool-id"}}
`
If not manually set a default value will be provided by the framework.
Once rendered an element's elementId
is considered immutable and you
should never change it. If you need to compute a dynamic value for the
elementId
, you should do this when the component or element is being
instantiated:
`
javascript
export default Ember.Component.extend({
init() {
this._super(...arguments);
var index = this.get('index');
this.set('elementId', component-id${index}
);
}
});
`
eventName
String
private
By default the {{link-to}}
component responds to the click
event. You
can override this globally by setting this property to your custom
event name.
This is particularly useful on mobile when one wants to avoid the 300ms
click delay using some sort of custom tap
event.
Default: click
href
Unknown
private
Sets the element's href
attribute to the url for
the LinkComponent
's targeted route.
If the LinkComponent
's tagName
is changed to a value other
than a
, this property will be ignored.
isDestroyed
Unknown
public
true
the observers and bindings were already
removed by the effect of calling the destroy()
method.
Default: false
isDestroying
Unknown
public
destroy()
method has been called.
The object stays intact until the end of the run loop at which point
the isDestroyed
flag is set.
Default: false
isVisible
Boolean
public
false
, the view will appear hidden in DOM.
Default: null
layout
Function
public
template
property during rendering. It is the
responsibility of the layout template to retrieve the template
property from the component (or alternatively, call Handlebars.helpers.yield
,
{{yield}}
) to render it in the correct location.
This is useful for a component that has a shared wrapper, but which delegates
the rendering of the contents of the wrapper to the template
property
on a subclass.
layoutName
String
private
Ember.Component
will lookup a template with this name in
Ember.TEMPLATES
(a shared global object).
Default: null
loadingClass
String
private
The CSS class to apply to LinkComponent
's element when its loading
property is true
.
Default: loading
loadingHref
String
private
The default href value to use while a link-to is loading. Only applies when tagName is 'a'
Default: #
mergedProperties
Array
public
queryParams
property of routes.
Here is some sample code showing the difference between a merged
property and a normal one:
`
javascript
const Bar = Ember.Object.extend({
// Configure which properties are to be merged
mergedProperties: ['mergedProperty'],
someNonMergedProperty: {
nonMerged: 'superclass value of nonMerged'
},
mergedProperty: {
page: {replace: false},
limit: {replace: true}
}
});
const FooBar = Bar.extend({
someNonMergedProperty: {
completelyNonMerged: 'subclass value of nonMerged'
},
mergedProperty: {
limit: {replace: false}
}
});
let fooBar = FooBar.create();
fooBar.get('someNonMergedProperty');
// => { completelyNonMerged: 'subclass value of nonMerged' }
//
// Note the entire object, including the nonMerged property of
// the superclass object, has been replaced
fooBar.get('mergedProperty');
// => {
// page: {replace: false},
// limit: {replace: false}
// }
//
// Note the page remains from the superclass, and the
// limit
property's value of false
has been merged from
// the subclass.
`
This behavior is not available during object create
calls. It is only
available at extend
time.
In Ember.Route
the queryParams
property is merged.
This feature is available for you to use throughout the Ember object model,
although typical app developers are likely to use it infrequently. Since
it changes expectations about behavior of properties, you should properly
document its usage in each individual merged property (to not
mislead your users to think they can override the property in a subclass).
Default: null
parentView
Ember.View
private
Default: null
rel
Unknown
public
Sets the rel
attribute of the LinkComponent
's HTML element.
Default: null
replace
Boolean
public
Determines whether the LinkComponent
will trigger routing via
the replaceWith
routing strategy.
Default: false
tabindex
Unknown
public
Sets the tabindex
attribute of the LinkComponent
's HTML element.
Default: null
tagName
String
public
tagName
for an element, you
must destroy and recreate the view element.
By default, the render buffer will use a <div>
tag for views.
Default: null
target
Unknown
public
Sets the target
attribute of the LinkComponent
's HTML element.
Default: null
title
Unknown
public
Sets the title
attribute of the LinkComponent
's HTML element.
Default: null
Events
click
private
Triggers the LinkComponent
's routing behavior. If
eventName
is changed to a value other than click
the routing behavior will trigger on that custom event
instead.