How to automatically render some default content in ember.js? - javascript

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'));
}
});

Related

Alter shared mdToolbar from view

I have a SPA in Angular Material which is displaying an mdToolbar element with a hamburger menu + left sidenav. That menu at the moment resides in my index.html where I have also set-up a <ui-view> element to render the view.
Now I have a view with a mdList in it. When the user selects some items, I want a delete icon to appear in the toolbar. That delete icon should be linked to the delete action of my controller which is of course specific to the view loaded, not to index.html.
I want to know what a recommended pattern for this would be. I can think of some ways to do it, but those are ugly. I was thinking in the direction of being able to have some placeholder area in the toolbar which I can replace with contents from my view, where the element actions (ngClick) are linked to the actions of the view controller. Does anyone know a good tutorial or codepen-like example of how to do this?
Update
I've now got something implemented that I'm happy with, but it's not quite there yet. What I did is create a menuService which is injected in the controller behind my menu (it's not a separate view, could be but doesn't make a difference in this scenario). The menu controller binds to this service and other services can inject stuff in it. In my test scenario, I inject a string which is then displayed in the toolbar, all ok.
The only thing I now need to do is instead of a string, inject a button with an event handler which goes back to the controller of the view. I'm not quite certain how to do that yet.
Another update
So I created this class:
export class CommandButton {
svgSrc: string;
click: () => void;
}
which I can inject into my menuService and then binds to the menu controller. Works fine for the icon (the button appears) but as one might expect (I did), the click function doesn't work. I set this in the view controller as follows:
var deleteButton = new Services.CommandButton();
deleteButton.svgSrc = 'icons/ic_delete_24px.svg';
deleteButton.click = this.deleteLogs;
this.menuService.setButtons([deleteButton]);
And the code for this.deleteLogs is simply:
deleteLogs() {
console.log('deleting logs');
}
Code for the buttons:
<div ng-repeat="button in ctrl.buttons">
<md-button ng-click="button.click">
<md-icon md-svg-src="{{button.svgSrc}}" class="md-icon md-24"></md-icon>
</md-button>
</div>
What I hoped for is that this would trigger the deleteLogs method in the view controller, but that's not the case. I need data from the view as that is where the items are selected. As far as I can see there's just nothing happening so the binding fails somewhere. What would be a good way to make sure the click event makes to to the view controller function? I could do a $rootscope.$broadcast but that feels hacky.
Last update
Never mind, I found my own bug. The binding of the event was incorrect, should have been (note the parenthesis):
<md-button ng-click="button.click()">
In the meantime I've figured out a nice way to do this. The post itself now also contains the answer.

Cannot use the title attribute in the side navigation list template in Oracle Apex 5.0

I am working with Apex 5.0, I am in theme 42. I am using the Standard Page template which has the side navigation bar. This side navigation bar is using the template Side Navigation Menu. Now I copied this template and made the new version which I named Side Navigation Menu 2.0, and I set this new template to be used in place of the Side Navigation Menu in all places it is being used since you can not edit the original. I modified the JavaScript in this template to have the default layout minimized which I do not believe has an effect on my problem since it occurs with the original template as well.
Problem:
I am trying to get the hover title to appear with the list items. Now in the default template, there is a title attribute set to the substitution string #A04# for the link <a> element. So it is similar to this:
<li data-current="true" data-id="#A01#" data-disabled="#A02#"
data-icon="#ICON_CSS_CLASSES#">#TEXT_ESC_SC#
The problem is that when I set the A04 substitution string in the list, there is not title attribute which gets set. I changed the attribute to be included in the li element, and I am still running into the same problem. Now, I think I have narrowed the problem down to the classes being used in the parent elements of the list, so I think I have to look into the default javavscript or css files to actually see why the title attribute is being ignored. I inspected the list element and the title doesn't even appear. Does anyone know if/where I should look at these js and css files or if I am going in a wrong direction?
Anything will be helpful, thanks. I can include screenshots or more info if needed.
The two main divs in the navigation list are:
Main div class = "t-Body-nav"
Main div class = "t-TreeNav a-TreeView"
I was able to solve this problem. At the end of this article is a gif with the result of my solution. I will not write in detail how it works but here are two tutorials on how to do it.
If you want menu titles only on one page, just follow these steps:
First step -> In your APEX aplication go to the page where you want the function (I selected Home Page)
Second step -> Go to the events section
Third step -> Create a Dynamic Action based on images
(you can find all scripts at the end of this article)
And you're done it should work.
If you want menu titles on all pages, just follow these steps:
First step -> In your APEX aplication go to the Global Page
Second step -> Go to the events section
Third step -> Create a Dynamic Action based on images
(you can find all scripts at the end of this article)
And you're done it should work on all pages.
Scripts:
document.querySelector(".t-Body-nav");
const elements = document.querySelectorAll(".a-TreeView-label");
for (let i = 0; i < elements.length; i++) {
name = elements[i].innerText;
elements[i].title = name;
}
Result

How to dynamically render views based off model in Ember JS

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.

transfer information/variables from one page to another

Here is the situation I've got:
Main page, here i have 3 choices(links to the same page) witch actually are 3 types of galleries but they are all on the same page.
Gallery page, when the page is opened it loads the 1st gallery ( i load the others and hide the previously viewed from 3 other buttons which correspond to the other galleries , and i do it with javascript )
I don't really have a way of telling what choice has been made,because they all point at the same page. Since i am doing the whole gallery with javascript , is there anyway to link a variable or something from the 1st page to the 2nd ?
Or just a way of knowing what choice has been made ?
Thanks, and ask away if something is not clear enough.
Just off the top of my head...
Since no reloading. In that case, if it was me, I would either make a Javascript object that contained information on my gallery that I needed, like so:
var global_galleries = [
{
"name": "gallery_1",
"open_state": true
},
{
"name": "gallery_2",
"open_state": false
},
// -- and so on
];
then set this during your 'gallery open' event. It would make a handy way to catch user actions per gallery.
OR you could do something down and dirty to check the .style.display of your galleries themselves.

Items in Sencha Touch Carousel disappearing

I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?
Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.

Categories

Resources