I got a page that includes 15 pictures and I must redirect user to the details page if one of them is clicked. so, I have 15 different routes like 1,2,3,...15. But as I know, I cant give dynamic variable to #link-to helper. So how am I gonna make every picture go to its own route? this is how my index page .hbs looks like :
{{#each model as |rentalUnit|}}
{{rental-listing rental=rentalUnit}}
{{/each}}
{{outlet}}
This is how I print every picture. And this is how am I trying to go to routes :
{{#link-to "???"}}<img src={{rental.image}} width="200">{{/link-to}}
so, there is ??? because I dont know what to do. Thanks!
Well, first why not use a dynamic segment in your route? Like this:
this.route('image', {path: '/images/:id'});
But what you want can be done by just passing a variable, not a string to the link to helper as first argument:
{{#link-to target}}
Where {{target}} would print your route name. So target is a variable here, not a string.
Checkout this twiddle.
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
This Ember template code...
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{rental.bedrooms}}
</div>
<div class="detail temperature">
<span>Current Temperature:</span> {{city-temperature location=rental.city}}
</div>
...results in this rendering...
How could one get the "25C" text to render on the same line as "Current Temperature" in the same way that "San Francisco" is on the same line as "Location"?
I have tried getting the city-temperature component to return only text, but (secondary question here) is it even possible for a component to return only text if the text is from a remote ajax request since the promise seems to need a DOM element to append to?
This Ember app is available here on GitHub. It's a modified version of the official Ember.js tutorial app with this "Current Temperature" detail added.
The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.
What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:
tagName: ''
within city-temperature.js. You can see the following twiddle to see the second option I mentioned.
After reading your comments; I have forked your repository and made minor modifications to achieve what you want. You can check my repository and my corresponding commit to see what I changed.
Basically; I really did not like the idea that weather service is returning a DOM element. I have changed it to return an instance of ember promise (I mean Ember.RSVP.Promise). Within city-temperature.js I just set a retrieved weather value from weather service and set it to the component instead of making DOM modification. Finally; I modified city-temperature.hbs to render weatherValue and added a simple css item in order to prevent weather-container div to insert a new line break.
I am not sure; whether you will like my solution or not; but I guess you will retrieve the visual appearance you want. You can always rely on promises for async tasks; you do not need to create DOM elements and pass them around to components and append them to somewhere within DOM tree of the corresponding component. I believe one of the reasons we are making use of a framework like Ember is to prevent such DOM modifications. Best regards.
An ember component adds a div by default. If you don't want to add this div tag, you need to set tagName to an empty string.
That's called tagless component.
Further, for your case, you can give a tagName='span' so you will not need a span in your template.
export default Ember.Component.extend({
tagName: 'span',
classNames: ['weather-container'],
weather: Ember.inject.service(),
//rest of your code...
});
I have navbar component which I have placed in an application.hbs so that it should be visible always.But I want to change the title of the navbar with each page I visit ( say I am on index page it should say "Home" , if I am on profile page it should say profile,etc).Right now what is happening is navbar title always remains "Home" for all the page.This is happening because the navbar gets rendered onlu during the time it loads the page in browser and after that it doesn't change according to page.
application.hbs
{{top-navbar dp_url=model.profile.dp_url first_name=model.profile.first_name title=title}}
{{outlet}}
Here the I am computing the value of title depending upon which page the user is.
application.js(controller)
if (currentPage === "" || currentPage === "#"){
currentState.set('title',"Home")
}
else if(currentPage === "Userprofile"){
console.log('myStudio');
currentState.set('title',"UserProfile");
}
In here the currentpage has the current url of app and I am comparing it and deciding the value of title for navbar.
But the top-navbar title value gets calculated only for the first time when user load the app in browser and not when I move ffrom one route to another.
I have also tried the Ember.Evented but not able to solve it.
I don't know what Ember.js and Ember-data version are you using, currentState is deprecated since 2.1, anyway looks like you're using a private method intended for Ember internals and not meant to be used in an application.
A possible (but maybe unnecessary complicated) way to accomplish what you want is:
Create a model with the information you want to mutate in the navbar (e.g. navbar-data).
In the route where the navbar is rendered, create and return a record for it using a fixed numeric ID (e.g. store.createRecord('navbar-data', { id: 1, title: "index" })).
Pass the created record to the component (instead of just a string).
Whenever you want to change, peek the record with store.peekRecord('navbar-data', 1) and change the value you want to change in the navbar.
Of course, the record you use for that must not be saved with record.save().
I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do :
function ArticleListCtrl($scope, $http) {
$http.get('/articles/?format=json').success(function(data) {
$scope.articles = data;
});
}
But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!
If I understand correctly, what you need is to define a partial template and a route,
for the detail view of your article.
An example is here
More specifically what you'd need is something like the following.
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
otherwise({redirectTo: '/articles'});
}]);
What the above does, is to hijack urls of the form /articles/5/ and instead of actually
performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled
by your ArticleDetailCrtl controller.
In your ArticleDetailCrtl controller function, don't forget to include the $routeParams
service. This will give you access to the url parameters, such as articleId, which we
defined above.
The final thing to do is to generate these links in your article list template. e.g:
<ul>
<li ng-repeat="article in articles">{{article.title}}
</ul>
I am trying to use ember-data using https://github.com/emberjs/data as a reference.
Specifically, I am trying to use an array controller to display all of the 'Person' objects in my database. I also want to allow the user to create a new 'Person'.
I have the following code which works:
App.peopleController = Em.ArrayController.create
content: App.store.findAll(App.Person)
newPerson: (name) ->
App.store.create App.Person,
name: name
#set('content', App.store.findAll(App.Annotation))
However, it seems inefficient to reset the content property every time a new person is created. If I remove the last line and change the code to the following:
App.peopleController = Em.ArrayController.create
content: App.store.findAll(App.Person)
newPerson: (name) ->
App.store.create App.Person,
name: name
A new view is still created on ever newPerson call, but the same object is duplicated. Essentially what is happening is all of the new templates use the first object created instead of a new one each time. I think this is related to the following bug: https://github.com/emberjs/data/issues/11.
For reference, my template logic is as follows:
{{#each App.peopleController}}
{{#view App.PersonView contentBinding="this"}}
{{#with content}}
Client id is {{clientId}}
{{/with}}
{{/view}}
{{/each}}
When I use the second version of my code-- the one with the #set('content', App.store.findAll(App.Annotation)) line-- the clientId is duplicated for every Person object. In the first version, the client ids are correct.
Can anyone shed some light here? Am I doing this correctly? My instincts are telling me this is a bug but I am not sure.
I think it is a bug. I posted a related issue that illustrates this issue.
Try using the #collection view instead.
See code of ToDo example. Also see http://guides.sproutcore20.com/using_handlebars.html section 5 for some documentation.
Hope this helps.