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.
Related
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
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
I'm working on my first Ember.js project and I've to deal with the current problem:
I have a "press" page which has more contents. In ember, there are two routes - let's call it "abouts" for whole page and "about" for each content on a page. Basically, there are (currently) 7 pictures/items with titles etc. When you click on each of those, clicked picture/press gets rendered and opened. This all works perfectly.
What I want to do is - when "abouts" page gets opened, I want to automatically render latest content (right now, nothing gets rendered until you click on an image). One known solution to do that is to pass an additional argument (id) in {{linkTo}} (which is connected to the menu item) in my view, like this:
{{#linkTo 'about' 6 title='Press'}}Press{{/linkTo}}
This works, but it's not dynamic because id is hardcoded. What I want is to dynamically pass the length of "about" items minus one (in my case 7, but it will grow). Is there any way to get length of items "about" items? Maybe in ApplicationRoute or somehow?
Or do you maybe have any other idea of how to solve this? Simply, how to render some content by default?
I'm also attaching two image, to maybe be more clear about what I want to do.
I've solved this a little bit different. Here's the solution.
With {{#linkTo}}, I've generated link to root page, like this:
{{#linkTo 'abouts' title='Press'}}Press{{/linkTo}}
In AboutsRoute, I've added redirection which is performed immediately. It looks something like this.
App.AboutsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('about');
},
afterModel: function(abouts, transition) {
this.transitionTo('about', abouts.get('length'));
}
});
In my django app I would like to display a text when a user clicks on a button, without refreshing the page. When the user clicks again, I would like an other text to be displayed, still without refreshing the page.
The informations (texts) I wan't to display are in a query set, named "information".
So I would like to know how to accomplish that.
Here is the way I try to do it:
I create a view where I store my query set:
def get_information (request):
information= Information.objects.filter(object1__id= X)
Then I create a jquery get function (in the template of the page where the user clicks) in order to get informations on this list:
function get_info(){
$.get('/mysite/get_information', {'information':information}, function(data) {
$('.information').html(data);
});
};
And then I render it in my template with a submit button and a onclick="get_info".
But I don't know how to make the request get a different information at each request, in order that the user does not get the same information twice.
Thank you a lot for your help.
Take a look in to Django Pagination. You could create the Paginator object in your view and then you can display message from the queryset based on the request from the client side. Let me know in case of any issues.
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.