I am using Ember.js 2.3. I have a {{link-to}} that works on parts of the app and not other parts. Here is the {{link-to}}
{{#link-to 'leads'}}Leads{{/link-to}}
On the parts that it does not work, the link is still generated. If I inspect the element, I see:
<a id="ember397" href="/leads" class="ember-view">Leads</a>
However, the link is not clickable by the browser. Could it be connected to the {{outlet}}? The link that works is modifying the {{outlet}} and the link that isn't working is in the template generated inside the outlet.
I am new to Ember and not sure of the terminology or if I am asking it correctly.
It is something else going on in my code that is causing that page to not have links work.
Related
I have a piece of code like {{#link-to "schedule.feed" invokeAction=(action "toggleNavigation")}}
Which gives me this error message: Do not use action as (action ...). Instead, use the on modifier and fn helper.ember-template-lint(no-action)
How do I replace action here? I tried changing it to an onclick and using fn but that didnt seem to work
Unfortunately, the ember-invoke-action addon for Ember.js has not been updated in some time, and does not work well with the latest Ember Octane code. I would recommend that you template-lint-disable this particular warning for now.
Update: The on modifier with the LinkTo component works well in Ember Octane.
<LinkTo "schedule.feed" {{on "click" this.toggleNavigaion}}>Feed</LinkTo>
See this in action here: https://ember-twiddle.com/c94e0aed7246e86ff81c0fc43b978b1d?openFiles=templates.application%5C.hbs%2C
Can someone tell me why "Action" does not work here? Has it got to do with my route?
{{#linkTo "content.friend" this}}
http://jsbin.com/EtOjuTe/17
http://jsbin.com/EtOjuTe/19 (Here is the version with it uncommented and thus no output)
Thank you.
The first argument to linkTo is the name of the route that you want to link to. You don't have a route called content.friend, so Ember fails when trying to build the link.
I would expect that you would want to use contact.friend, but that's not working either. I think this is due to the jsbin being set up with an old version of Ember. I can get it to at least build the link by using just friend. Since the friend route is nested under contact that means Ember needs two models to be involved in the link.
Since the contact is attached to the friend model as who, you can do this:
{{#linkTo "friend" who this}}
That gets the link to build, but the id for contact is undefined. Again I suspect that an old version of Ember is at fault.
Here's the Ember docs about linking to routes with multiple dynamic segments. http://emberjs.com/guides/templates/links/#toc_example-for-multiple-segments
Here's a semi working jsbin : http://jsbin.com/OdoHaGi/1/edit
I'm trying to test my ember code in my jsFiddle
I set framework to Ember 1.0.0-rc1 and onDomReady
and I added jQuery as a resource.
and I setup basic application template in html and declare application in js.
I think I set very basic of an ember app. but it doesn't work.
What am I missing here?
There is an up to date fiddle/jsbin link in the Ember Contributing document:
https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md
It is always up to date with the master version of ember.
Two things are going wrong here.
There is a bug in the way jsFiddle has implemented ember support. First off it should be including jQuery, and also it is loading ember before handlebars. You can see what's going on by right-clicking on the output frame and selecting view-source. As a workaround, manually add references to these libraries.
You've got a typo. Instead of type="type/handlebars" you should specify type="text/handlebars"
Working fiddle here
You should definitely use emberjs.jsbin.com. It has everything already setup.
There are several extensive code examples on a tutorial page at the ember web site that are all failing in a specific way. As this is supposed to be archetypal ember code ostensibly to direct newcomers how to code in ember, I am at a loss. Could someone who knows ember have a look at the code. (An example is directly above that bookmark I listed, and includes both the templates and js.
Specifically what's happening is that the main root page template has an outlet 'footer' that's only written to by the subpages, but when you navigate back to the home (root/index) page, that outlet still has the info from the subpages showing, which it shouldn't. The same thing is happening with the template called 'traversal' whose outlet is only written to by the subpages, but that outlet is also still showing info in it when you navigate back to the root.
I did run across a function disconnectOutlet in the API docs, but it says you shouldn't hardly ever have to use it, and its not in the example code. I tried it - evidently not actually in the api anymore.
If you want to run that code above you'll need the following from the ember site:
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
As you mentioned, disconnectOutlet was added by this pull request. You can use it to remove an outletView (by name) from a controller. For example, remove myOutletViewName from applicationController when exiting a certain route:
aRoute: Ember.Route.extend({
exit: function(router) {
router.applicationController.disconnectOutlet('myOutletViewName')
}
})
Note that if you use {{outlet}} in your template, without specifying a name, the default name is view so you do:
router.applicationController.disconnectOutlet('view')
i have a simple text field helper, taken directly from the ember contact example. it works properly in this jsfiddle, using ember-0.9.8.1 : http://jsfiddle.net/inconduit/dKsh3/2/
however when i try to run the same code using the latest ember built from master (v0.9.8.1-421-g189ad79), the content of the text fields never get set (they remain as empty) and double clicking them has no effect. why is this happening?
It's a context issue. You have to prefix the properties in the templates with "view".
See this modified JSfiddle:
http://jsfiddle.net/dKsh3/4/