Setting title of a web application's index page using ember - javascript

I want to dynamically update the title of my web application and append the user name after it. I know this can be done using jquery but wanted to know if there is any ember way of doing it.
My title in app/index.html looks like this
<title>XYZ.com</title>
but I want to make it look like
<title>XYZ.com - User name</title>
And the username comes from the ember model User.name

There is an Ember CLI addon for this.
Use 'ember-cli-document-title' for a sane way to manage your document title.
The Readme has excellent usage notes.
Link to Addon: https://github.com/kimroen/ember-cli-document-title

Declare one variable in application controller.
webName: null
and which place u have to change the web application name u modify the controller variable of application controller.
this.controllerFor('application').set('webName', yourwebappname);

document.title = "test";
hope it will help u

Related

Getting data from Dark Sky API using handlebars, issue with routing

I have an issue regarding the script which helps me get the data from Dark Sky API.
I am developing the app in node.js using handlebars.
I am trying to get just some specific data from the forecast script, send it to app.js script which does the page routing and then to add it to forecast.hbs page.
Unfortunately, I am really stuck on this.
I have attached the photo with the code.
What I want to do is to get just some specific weather data, so, later on, I can use them one by one in the HTML code.
I have somehow to add them in the callback(right side), then in the middle, where the forecast routing is, then I think I need to replace forecastData with something else like..more variables and add those in the rendering part?
For example, I would like to take the icon variable, which contains the code that I need to add in the hbs page.
I want to do some binding by replacing Skycons.RAIN with Skycons.{{icon}}, where the icon should be in the middle file, like forecast: forecastData.
If I'm using {{forecast}}, I can show all the data that is on the right side, more exactly the variable weatherDetails, which contains the other variables.
How can I take advantage of binding and use it for the icon, for example?
Can somebody give advice, please?
I am really confused...
Kind regards, Gabriel
Why don't add an additional parameter to the callback function and then add it to the handlebars data object? Then you should have access to it in the template.
Btw are you using nodemon with docker? I'm also stuck with a problem, where nodemon isn't updating the container when the files are changed.

updating a model in one controller that is watched and located in a different package and used by another controller

Again, let me start this by thanking for your time to read this and second by apologizing for not being able to actually paste my code.. it's located on a computer that doesn't have internet access.
I am working to add an icon to a systray in a web application. The icon changes based on values contained in the model. The systray is has a controller located say
myproject/myjs/main/controllers/systraycontroller.js
myproject/myjs/main/models/myniftymodel.js
myproject/myjs/main/mainModule.js
I want to update the model based on user choices on a different page that also has a controller and it's own module
myproject/myjs/colors/colorsModule.js
myproject/myjs/colors/controllers/colorsController.js
My question, what exactly is required in colorsModule.js to get colorsController.js to be able to not only see myniftymodel.js but update it?
myniftymodel.js is just a simple model that returns a values array and is used by the DIV in systray.html to display info about the icon.
I recommend that you wrap the model in a service. Use one of the various providers offered by Angular.
https://docs.angularjs.org/guide/providers
You can then dependency inject the service anywhere you like in your application.

AngularJS: pass variable from backend while loading a page

This is my first ever trial with Angular JS and am stuck at a very basic step. I have an AngularJS front end and Grails backend. Below are the code snippets I have followed by my question.
URL Mapping entry:
as
"/graph"(controller: 'Graph')
This is my Grails controller/action which renders the GSP:
as
class GraphController {
def index() {
render(view: "../graph", model: [employeeId: "197040"])
}
}
This is the AngularJS file, which is saved as graph.gsp:
When I give the URL: hostname:port/graph I am able to see the body displayed as "Hi ! Welcome". But, I couldn't figure out a ( simple ) way to read that employeeId and display it as "Hi ! Welcome 197040" ( i.e being able to read that variable employeeId sent from backend)
<div><h3>Hi ! Welcome {{employeeId}}</h3></div> didn't work as expected.
I am sorry if this is too basic a question, but I just couldn't see the answer anywhere.
Try this:
<div ng-init="employeeId=${employeeId}"><h3>Hi ! Welcome {{employeeId}}</h3></div>
This will assign the value of the employeeId within the context of the GSP to a variable available within the context of Angular. To understand what I mean, take a look at the generated HTML source in your browser.
By doing this, the employeeId variable will be assigned within the scope of your Angular controller also.
There is a good tutorial on using Angular with Grails here http://claymccoy.blogspot.com.au/2012/09/grails-with-angularjs-and-coffeescript.html?m=1
Your Angular app runs on the user's browser and has no access to your backend environment. Therefore simply setting employeeId as a backend environment variable does not allow Angular to access it.
I can recommend two solutions to this problem:
1) In the index view (/graph), render employeeId as a JavaScript global in a script tag. In Angular, register the global employeeId as an Angular value. Then you can inject the employeeId value into your Angular controller and render it in the Angular view.
2) Retrieve the employeeId asynchronously via Ajax before your Angular app bootstraps, and register it as an Angular value. Then you can inject it to your controller. I recently wrote a blog post about how this can be done: http://biodegreeprogrammer.blogspot.ca/2014/07/pre-loading-data-asynchronously-in.html
The other thing here is, this is gsp afterall.. and your grails variables will work as per normal like how you defined the layout..
<div><h3>Hi ! Welcome ${employeeId}</h3></div>
Which will be grails pushing that info back....
The alternative is something like this: as shown per service on this demo site..
https://github.com/vahidhedayati/testingarrested/blob/master/grails-app/assets/javascripts/testingarrested/arrestedServices.js
Maybe you wish to try out arrestedplugin for yourself as a demo and then take the for example above service and change it for your own usage..

How do I insert a <script> tag on a Django admin page

I'm trying to have JavaScript pickup a variable set from the Django admin context. The 'original' object is there already and is the model object I need. But, I need to get the objects name into a variable I can use in my JavaScript.
<script>
var className = "{{ original.__class__.__name__ }}";
</script>
I have an Inline and a model Admin that I can use for this, but the Media class will only take files. What I need is a way to insert the above code into an admin template without overriding the template itself. Overriding the template requires me to know where exactly my code will reside which I will not know as this code will be part of a package.
Is there a way to dynamically update the TEMPLATE_DIRS settings object? If so then I could use the template method to remedy my problem.
One way to achieve this is to override your Admin Templates. Now for this you should create a Virtualenv and install python and Django in it.
After that you can find out your django path by opening a python console with: python
Type the follwing into the console:
import sys
sys.path = sys.path[1:]
import django
print(django.__path__)
This will output the path of your django install. If you're using a virtualenv it's usually something like:
~/myproject/env/lib/pythonX.X/site-packages/django
So the admin templates are in :
~/myproject/env/lib/pythonX.X/site-packages/django/contrib/admin/templates/admin
There you can add a script tag just as in normal django templates.
Note that the virtualenv is just a recommendation. You don't have to use it but it's usually better to do so since it doesn't affect all python/django project but only the one you are using the env for.

Ember.js view not being autoupdated

I'm stuck in the 'Scrumptious' bookmark app created in a Tuts+ Course called 'Let's Learn Ember'. As the course is some months old, I'm trying to re-do the app using the most updated versions of Ember.js and Ember-Data.
Here's the repo: https://github.com/jantequera/scrumptious
NOTE: due to #claptimes request, I've added a jsbin of the project: http://jsbin.com/ukuDORUZ/2/edit?html,js,console
The thing is, that in the 'bookmarks' template, when I add a new bookmark, it is stored and the "create Bookmark" partial disappears, but the bookmarks table isn't updated, and it doesn't even reflect the changes in the newly created bookmark on real-time, which is the intended behaviour. In other words, I have to refresh the browser in order to see the new bookmark in the table, which is not the way an ember.js app should work.
As I am learning Ember, I might have missed or misunderstood something in the guides that explains this, so any help is welcome. Below I expose the code, if you wish to see it in context or even try it out, use the repo above. Thanks!
EDIT Anton below pointed out and advised the usage of components, which make the jsfiddle above work. However, when I use this solution in my local copy, it wouldn't work UNLESS I use the FixtureAdapter INSTEAD of the LSAdapter (local-storage). Any clue?
http://jsbin.com/ukuDORUZ/6
You use "render" helper:
{{render "table" controller.regular}}
model is not updated in "table" template when you create new bookmark and update controller.regular
you can use component (http://emberjs.com/guides/components/) and bind your model to component's parameter:
{{bookmarks-table elementsBinding="controller.regular"}}
http://jsbin.com/ukuDORUZ/6

Categories