This is my twiddle to be more clear :
https://ember-twiddle.com/1454b9f4a64c197879d13f756401e561?openFiles=router.js%2C
I am trying to make a dynamic route. When I click a picture it should go to its detail page with different URL and different content. Like, when I click on the first pic it should go to localhost:4200/pic/1 or localhost:4200/1.
I'm trying to do the URL dynamic but I can't so far, when I click a picture it does nothing. What am I doing wrong?
Also, at the beginning I created routes and templates for every picture but with bigger data it won't be possible. How am I gonna handle this?
I got it working by:
Not using Ember-data....I'm not sure how to make that work in Ember Twiddle. I just used a plain array of objects.
I passed in the model to the route in the link-to
Here is what the template looked like with the pic model passed to the route in the link-to:
{{outlet}}
{{#each model as |pic|}}
<div>{{#link-to "pic" pic}}
<img src={{pic.image}} width="300">
{{/link-to}}</div>
{{/each}}
See my working twiddle here: https://ember-twiddle.com/4b2b6467199622ae740259622c76ba9b
While using {{link-to}} helper for dynamic routes you must include the dynamic attributes also.
{{#each model as |pic|}}
<div>{{#link-to 'pic' pic}}<img src={{pic.image}} width="300">{{/link-to}}</div>
{{/each}}{{outlet}}
Here the pic model is passed to the link-to helper.
But this wont work if you are directly accessing the page for a specific pic.
Also rename your models/images.js to pics.js. You must also remove the id attribute from pics model as Ember.js do not allow to set id manually.
You are need to pass the parameter with link-to like
{{#link-to 'pic' pics}}
because you are accessing the id in the pic route from params.id but not send any parameter.
twiddle
Related
I have a bootstrap modal that will display info about a parent document. The modal then has next/prev buttons that can rotate around a list of parent documents and reactively change the info displayed on the modal. It does this by simply changing a ReactiveVar of the current parent's onClick of next/prev. This works like a charm.
My problem is that each parent shows some child data as well. The child data is an array of embedded documents. And each document's property has some HTML inputs. I'm trying to pre-populate the values of the html inputs. However, I'm finding this does not work. id and foo are properties on the child document(s).
A call to {{parent}} is a Helper method that returns the current parent from MiniMongo. This seems to work fine as the parent's metadata changes reactively.
{{#each parent.childrenArray}}
<input type="text" id="{{id}}" value="{{foo}}">
{{/each}}
So the issue is that the HTML value does not change. Clicking next will still show the old child's value. I understand there's no reactivity for embedded documents and I'm sure this is the problem. Strangely, upon inspecting, I am in fact seeing the input's id being changed though. Does anybody know the solution to this? Thanks!
This seems to happen when I try to save the children back to the DB. I.e. hitting next/prev should save whatever value users puts into the HTML input before moving on to the next Parent and pre-loading its children
If parent is a helper, then I don't think you can use the subscript notation to get its properties, at least not reactively. However you should be able to use this instead:
{{#with parent}}
{{#each childrenArray}}
<input {{attributes}}>
{{/each}}
{{/with}}
Update: The other thing that is probably required is to use an attribute helper. I've also updated the code above to use this.
Template.yourTemplateName.helpers({
attributes() {
return {
type: 'text',
id: this.id,
value: this.foo
};
}
});
Update 2:
Working "offline" in a git repo by the OP I realized that the modal body was better done as a separate template, such that the data context for that template would change reactively. The part of the code that was at odds is not represented in the question, so read this question and answer with a grain of salt.
I have a simple website with a main menu. The menu has categories like "T-Shirts, Shoes and Accessories...". But its dynamic. All of these categories are in a Model "Category" and the words can be different.
So, how can I have this menu rendered on every page without passing data to the view on every controller like:
Category.find(function(err, categories){
res.view({categories: categories});
});
Thanks!
Define your header in a separate file call it as header.html and include it in layout.ejs using
<% include ../includes/header.html %>
And show appropriate menus on each page depending on the condition whether it should be displayed to normal user or admin by adding roles field to category collection.
If you want it on all pages, it might be easiest to write a customer middleware function in config/http.js that adds categories to the local variables.
See sails docs - adding-or-overriding-http-middleware
My app has two models Url and UrlType and I want to select UrlType via select box. How do I do that?
Here is the jsbin where I tried to reproduce the scenario, though this.get('store') do not work :( But the idea must be pretty clear.
http://emberjs.jsbin.com/nefas/6/edit
Few things with your jsbin.
this.store din not work as you have not mentioned your adapter like this
App.ApplicationAdapter = DS.FixtureAdapter;
You din not return in the model return.
Though you have got around what you wanted, I have made a jsbin that might have what you want. http://emberjs.jsbin.com/saxuy/1/edit
Update
http://emberjs.jsbin.com/saxuy/6/edit
You could set the url_type attribute of your url model directly like this in your template.
{{view Ember.Select content=urlTypes optionLabelPath='content.caption' selection=url_type}}
If there was a url_type set for the model, it will be the selected option.
Looks like your logic is working just fine
http://emberjs.jsbin.com/nefas/12/edit
In my program I have a front display that the user sees when they first login. They have the option to sort the various sections of this front display to their liking. Each of these boxes has a model in the database and then also a model that links to the box for that specific user and the sort order to display the boxes in.
What I need to do is go through each box in order(already figured out) and either render a view(I can work with this) or render an entire controller(probably harder) to the page.
I've had moderate success with something along these lines
In the template
{{#each model.character.overviewBoxesSettings }}
{{ view App.OverviewCustomView contentBinding="this" }}
{{/each}}
In the view
App.OverviewCustomView = Ember.View.extend({
templateName:function(){
return this.get('content').get('overviewBox').get('viewName');
}.property('content.overviewBox.viewName').cacheable(),
_templateChanged: function() {
this.rerender();
}.observes('templateName')
});
Now this actually works, but the issue is that the views seem to persist when I change route. Also when I switch back to the front route it creates another set of the views.
Any ideas on how to solve this would be appreciated.
I have an emberJS object, viewed by an editablefield view, in order to be able to edit it with bindings.
I modify the view in order to be able to replace links in the text.
My problem is that if I use the inside views (Zs.RealValue) render function, it won't refresh on each update, like the simple {{value}} would do, only if I erase the text and after erase the first change.
I have a simple example here:
Steps to do: double click on one of the edit fields, the edit box appears, try modify the value, you will see, that the simple view is being updated, but not the other text view.
http://jsfiddle.net/symunona/hCjEc/7/
The problem appears because you try to implement the render function yourself in RealValue. If you change RealValue to just this:
Zs.RealValue = Ember.View.extend({
template: Ember.Handlebars.compile("{{value}}")
});
then the example works.