I'm a newbie in ember, and i can't find anywhere where i can append a format to my links.
I have to show a pdf coming from my server, and in rails i would do it in this way:
<%= link_to "Print", document, format: pdf %>
asssuming that my server is actually responding at documents/:id.pdf, how can i build this link in ember, when i'm inside a cycle of this type?
{{#each document in controller}}
...print document link here...
{{/each}}
thanks,
Marco
Ember's {{linkTo}} is for internal links.
If you want to link to an external resource, you should either user {{bindAttr}} on an <a> tag, or write a custom Handlebars helper.
Related
I started with learning EmberJS and maybe the answer is trivial, but after some researching, I still can't find a solution.
In my model template, I have some buttons(each for the different object) which after click should expand sidebar with its details.
What do I want to reach is something like this:
Could someone provide me with some simple twiddle?
There are two ways to achieve this effect.
Using controller's variable
{{#foreach model as |obj|}}
<button onclick={{action (mut activeModel) obj}}>{{obj.name}}</button>
{{/foreach}}
<!--Somewhere later in template-->
{{#if activeModel}}
<!--Code of overlay and sidebar, close button sets activeModel to undefined-->
{{/if}}
Using child (nested) route
Parent template:
{{#foreach model as |obj|}}
{{#link-to 'parentRoute.childRoute' obj tagName="button"}}
{{obj.name}}
{{/link-to}}
{{/foreach}}
<!--Somewhere later in template-->
{{outlet}}
Child template should contain code of overlay and sidebar, close button redirects back to parent route
well, one of the options is that you can create components and pass the modified model(modify the model using onclick function) as the data to that component.
for example,
let us just say that this is your main template
<button onclick="changeSideBar()">click</button>
<div style="display:none; //render it in the left-half(using bootstrap models)">
{{sidebar-component model=model.modified}}
</div>
in the javascript code (component.js),
function changeSideBar()
{
var modified= ;//set as per your convienince by iterating actual models or by any means
this.set('model.modified',modified);
//make display of sidebar div "block"
}
sidebar-component is your component. make the component as per your wish.
hope it helps.
I can't help much without your templates or codes. It would be great if you provide some of your works.
I am new to emberJS and I am trying to open a new page like 'www.google.com' from one of my page where I have my link specified in my HBS template like below.
{{#link-to 'applications.google' tagName="li"}}Google{{/link-to}}
I tried to insert the {{action}} helper inside the tag also, and wrote an action method in the controller, yet it didn't work. Not sure. Please help.
You can use normal anchor tag with full URL with protocol.
<a href='http://www.google.com'> example </a>
I did added an action helper in the HRef tag like
And in the Ember Controller I included an action as
actions: {
openGoogle() {
window.open("google.com");
}
}
It works!!!
I want to pass queryparams and anchor element name in the link-to. like this
localhost.domain.com?get=100&interviewId=11#4
I used query params to construct get=100&interview=11 , something like this
{{#link-to 'domain.url' (query-params get=100
interviewId=11)class="btn btn-info"}}
Link
{{/link-to}}
How to generate the link with anchor using ember link-to ?
Note: Need solution with link-to only, <a href=""> is not needed
Install ember-href-to addon,
ember install ember-href-to
You can use href-to helper to generate URL by providing queryParams and routeName.
(concat (href-to 'domain.url' (query-params get=100 interviewId=4)) propName)
Given my current router:
Posts
Create
Post
Edit
Comments
Create
Comment
InnerComments
Create
InnerComment
Index (post.comment.innerComment.index)
Ember.js is not loading any existing innerComments from the backend, but it is doing a hell of a job in creating and saving them like the picture below:
Not only I am able to create the inner comments, I am also able to successfully edit them as long as I do not reload the page... This unique behaviour tells me that the issue seems to be rather specific, but I just cannot find it. The code snippets below summarizes how things are loaded in order, but you can also check out the Source Code and these two screenshots with Ember Inspector:
Screenshot 1 - Created Inner Comment
Screenshot 2 - Page Refresh.
Post.Index (model is a post)
{{render "post.comments.index" model}}
Post.Comments.Index (model is a post)
<ol>
{{#each model.comments as |comment|}}
<li>{{render "post.comment.index" comment}}</li>
{{/each}}
</ol>
Post.Comment.Index (model is a comment)
<!--Comment Text, Comment by x User, edit, etc-->
{{render "post.comment.innerComments.index" model}}
Post.Comment.InnerComments.Index (model is a comment)
<ol>
{{#each model.inner_comments as |comment|}}
<li>{{render "post.comment.innerComment.index" comment}}</li>
{{/each}}
</ol>
Post.Comment.InnerComments.Index (model is an innerComment)
<!--InnerComment Text, InnerComment by x User, edit, etc-->
{{model.text}}
One missing line on Serialization has_many :inner_comments was the culprit as it was lost between merging two local branches.
If you have a similar problem, check the developer tools for the network transactions. If one of your XHR requests is missing the expected return payload (the inner_comments for each comment request in my case), then the problem is on your backend...
My Ember.js app is set up roughly like this:
Router:
App.Router.map ->
#resource('site', { path: '/' }, ->
#resource('dashboard')
#resource('account')
#resource('pages', { path: '/:page_slug'}))
Routes:
App.ApplicationRoute = Ember.Route.extend
model: ->
return App.Site.find(1)
App.PagesRoute = Ember.Route.extend
model: (params)->
return App.Page.find(params.page_slug)
EDIT:
Controller (JS not Coffee):
App.PagesController = Ember.ObjectController.extend({
needs: 'ApplicationController',
...
});
I have an ApplicationController and a PagesController. When I'm on a page, I want to call an action to delete the current page. If I place it in the PagesController it works kind of ok, but a navigation menu with a list of pages in the ApplicationView doesn't get updated until I refresh the page. So... I assume I need to place the action in the ApplicationController and add needs: ['ApplicationController'] to my PagesController.
However, when I do that, everything in my Pages template disappears.
I have an {{outlet}} in my Application template and another on in the Site template which ultimately displays the Pages template. Yeah, complicated, I know and there's probably a better way to do it, so any suggestions would be greatly appreciated. Oh and BTW, I'm a real Ember.js newb, so examples need to be spelled out explicitly. (Drawing them with pretty colors in crayon would actually be ideal.)
Thanks in advance for any help.
Here's the refresh issue. In the root resource site I'm loading in one Site model which the Rails backend returns using the url being sent in. Eventually, this app will be used with multiple domains, and each domain will be served it's own website (roughly based on the WP-Multisite concept). Then in the pages route, I'm loading one page of the site based on its slug attribute. That's all working fine. So, now I want to allow the user to be able to add and remove pages as they want.
So, the issue is this. When I delete a page at the PagesController level, the page deletes just fine, but the ApplicationController doesn't get notified. Namely, my nav menu:
<ul class="left">
{{#each page in page}}
<li>{{#link-to 'pages' page.slug}}{{page.menu_name}}{{/link-to}}</li>
{{/each}}
<li id="add-page-button"><a data-tooltip title="Click here to add a new page to your site." href="#" data-reveal-id="addPageModal" data-reveal>+</a></li>
</ul>
doesn't get notified that a page is missing and so it doesn't update the nav menu by removing that page from the list. Adding works fine, the nav list is updated when a new page is added, but I'm doing that at the ApplicationController level like so:
addNewPage: ->
# Get the site
site = #get('model')
# Get all the pages associated with the site
pages = site.get('page')
title = this.get('newTitle')
if (!title.trim())
return
slug = this.get('newSlug')
if (!slug.trim())
return
menu_name = this.get('newMenuName')
if (!menu_name.trim())
return
# Create a new page passing in our title, slug and menu_name
pages.create({title: title, slug: slug, menu_name: menu_name})
# Save the pages
pages.save()
if (pages.isError)
console.log(pages.errors)
else
#set('newTitle', '')
#set('newSlug', '')
#set('newMenuName', '')
$('#addPageModal').foundation('reveal', 'close')
And this is my deletePage code on the PagesController (sorry, I've got a mix of JS and CoffeeScript):
deletePage: function (slug) {
var page = this.get('model');
this.get('ApplicationController').deletePage(page);
this.toggleProperty('isEditingTitle');
this.toggleProperty('isShowingDeleteConfirmation');
this.transitionToRoute('site.index');
}
When I try this, Ember rather helpfully lets me know I need to add needs but again, when I do that, my Pages template is blank.
Oh yes, I have even tried setting the target attribute on the button calling the deletePage action.
I realize what I need to do is somehow access the Site model in my PagesController, but how should I go about that.
This post has taken on epic proportions. Sorry about that. Thanks again for any help.
needs doesn't do anything on the route, if you want to access a controller from a route you can just use this.controllerFor('application')
Additionally when using needs in a controller definition it should be like this needs: 'application' or needs: ['foo', 'application']...
Okay, all, I figured it out. For posterity's sake (and others who go looking for this). Here's how to delete an object in a model that has a belongsTo association.
ApplicationController:
deletePage: function () {
# First we find the Site which all pages belongTo
# Just ignore the hard-coded '1' it's something I have to do to get it to work
site = App.Site.find(1);
# Then we get the current model, i.e., the 'page' we're on and about to delete
page = this.get('model');
# Then, we get all 'pages'
pages = site.get('page');
# We remove the object from the page which updates the navigation menu
pages.removeObject(page);
# We delete the record and save the 'pages' model
page.deleteRecord();
pages.save();
}
Pages template:
{{#if isShowingDeleteConfirmation}}
<div class="large-7 large-offset-5">
<label class="inline left">Are you sure? (Can't be undone)</label>
<button {{action 'deletePage'}} class='button tiny alert'>Yes</button>
<button {{action 'cancelDeletePage'}} class='button tiny'>Cancel</button>
</div>
{{else}}
<div class="large-2 right">
<button {{action 'showDeleteConfirmation'}} class='button tiny alert'>Delete Page</button>
</div>
{{/if}}
I can show you the attributes and logic behind the if...else statement if you need me to.
Basically, the user clicks on the 'Delete' button, showing the other buttons 'yes' and 'cancel'. Once 'yes' is clicked, the deletePage action gets called.
I found very little documentation on the deleteRecord method and basically had to piece this all together myself. Perhaps there's a better way and this can be refactored. Just let me know in the comments.