I am building an app using Ember.js with an OAuth system. I have this button for my users to login: http://imgur.com/C8x70ZX
After my user logged in, it changes to this dropdown:
http://imgur.com/cGTsMzA
The problem is, this currently only works after a page reload. Since I am building a single page, dynamic application, this is something I do not want.
This is the implementation I use:
{{#if isNotLoggedIn}}
<li class="has-form" id="logInButton"><button onclick='FBLogin()'>Connect with Facebook</button></li>
{{else}}
<li class='has-dropdown not-click'>
<a href='#'><img class='profilePicture' {{bind-attr src=pictureLinkSquare}} height='25px' width='25px' /> Welcome, {{firstName}} {{lastName}}!</a>
<ul class='dropdown'>
<li>{{#link-to 'profile'}}Profile{{/link-to}}</li>
<li>Sign Out</li>
</ul>
</li>
{{/if}}
So, how would I go about changing that button dynamically, what do I use for that? Can I implement this using ember (I was looking at the {{action}} helper?) or is it better to use something like jQuery to accomplish this task?
This is my first small, single page project, so I feel a bit lost.
Creating a JSBin example would help understand your query better.
However from what I understand, you would have not marked 'isNotLoggedIn' as a computed property that probably would be watching some property in your controller that controls the state of login.
Look at the example #http://emberjs.com/guides/object-model/computed-properties/
In example, pay special attention to how fullName computed property ended by putting a watch on base properties '.property('firstName', 'lastName')'. Usually when this is missed, the computed property does not get 'refreshed' immediately.
Hope this helps!
Related
I have my template something like this,
<ul id="items">
{{#each items as |item index|}}
<li>
<!-- <input type="checkbox" id={{concat "pf" index}} /> -->
{{input type="checkbox" id=(concat "pf" index)}}
</li>
{{/each}}
</ul>
And I have my js something like this,
import Ember from "ember";
export default Ember.Controller.extend({
appName: "Ember Twiddle",
items: [{}],
init: function() {
$(document).on("click.somename", function (e) {
alert($(e.target).parent().length); //should get parent as "li" and length as 1
});
}
});
What happening for my project is that, if I click on ember input helper I am not able to get the parentElement using jQuery. But when I changed that input helper to normal <input type="checkbox" />, I am able to get the parentElement. I don't know whether Safari/Ember is using any virtual DOM or something to render its own helpers. This issue is happening only in Safari. In Chrome, it is working fine.
Unfortunately, I am not able to make a fiddle/plunker as the issue is not able to replicate in them. Sorry about that. In my project, I am using ember#2.7.3.
Any suggestions/help on this issue?
While I'd recommend trying to find a way to avoid using the jQuery click event in the first place, it sounds like an issue with how the different browsers treat parent. I would prefer to use .closest('li').eq(0) to access the first parent that matches the element you are looking for.
So far I've read https://angular.io/docs/ts/latest/guide/router.html#!#router-link and https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/
but they're a bit too dense for my level and I'm getting lost easily.
So I thought about asking if there is a simpler way of doing what I want, or if there's another way of looking at the problem.
Currently I have "half" a webpage built
http://plnkr.co/edit/BcyPlw?p=preview
, in angular2, in which I use js and ts functions to get some D3 and some maps working:
<div layout="row" layout-wrap flex>
<div flex="50" *ngFor="#item of items">
<md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
{{ item }} <span *ngIf="exists(item, selected)">selected</span>
</md-checkbox>
</div>
</div>
The idea now is to add URIs to events such as: if you click calendar, trigger an event so that I can return which cars were used in a given date, or which sessions does a car have in a given date, since I have created a webservice in java that is waiting to get something like:
#GET
#Path("/getData/{car}/{session}")
So the uri I am working with in the webservice (which I tested and works, and I want to connect with what I have in angular2 via tomcat) would be something like:
http://localhost:8080/Project/rest/projectName/getData/55/99
So I believe that is done with routing but 1º I haven't found examples that go deeper than /path (so, not /path/getData/data/data , in this case) , and 2º I am not really getting how to use what can be seen in the official tutorial { path: 'hero/:id', component: HeroDetailComponent }];
It is quite confusing and as of right now I do not feel I have the level to do all those steps (and there are many that I don't need, either), it all seems too complex
Okay this seems fairly odd but i am allowing my users to create any number of category / subcategories they want
When i pull the category data out it might look something like this:
as you can see from the above example the sub categories can have subcategories this list tree could go on forever.
Now trying to make the menu i have a simple list:
<ul class="nav dker">
<li ui-sref-active="active">
<a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
<span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
</a>
</li>
</ul>
The issue here is that i don't know how many times i have to repeat the subcategories which makes it impossible for me to know when to check for it?
i hope you know where im going with this how can i make a reliable list that follows the array pattern above when i don't know how many levels there are?
You are going to want to create a recursive template which will essentially look something like this:
<div data-ng-include="'displaySubcategory.html'"></div>
where displaySubcategory.html contains the ng-repeat and a recursive call to itself.
<div data-ng-repeat="category in category.subcategories">
<h1>{{category.name}}</h1>
<div data-ng-include="'displaySubcategory.html'"></div>
</div>
The idea is that everytime you call ng-repeat you are creating a scope around the child element, so a call to {{category}} will display the lowest level (current child) of the tree/data structure.
I have collections set up and working properly.
I am looping through a collection of projects
{{#each collections.projects}}
<a href="" class="portfolio-entry">
<div class="info-frame portfolio-title">
<h4>{{this.title}}</h4>
</div>
<div class="info-bits centerContext">
<ul class="centerElement">
<li class="info-bit">{{this.skills}}</li>
<li class="info-bit">{{this.type}}</li>
<li class="info-bit">{{this.platform}}</li>
</ul>
</div>
<div class="project-thumbnail">
<img src="{{this.thumbnail}}" alt="">
</div>
</a>
{{/each}}
I would like to use metalsmith-permalinks in order to resolve each link's url
I tried all kinds of lame things like this
<a href="{{this.permalink}}" class="portfolio-entry">
and this
<a href="{{this.url}}" class="portfolio-entry">
Of course - none of them works.
I struggled to find any detailed information on how to actually use permalinks within your template anywhere online.
The permalinks plugin adds path metadata property that doesn't seem to be documented well. This should be what you need to achieve links.
The Github page notes:
If no pattern is provided, the files won't be remapped, but the path metadata key will still be set, so that you can use it for outputting links to files in the template.
I haven't found anywhere else showing the use of this but I'd assume the above quote means that it is standard behaviour.
You can use it like:
{{#each collections.projects}}
<a href="/{{this.path}}/" class="portfolio-entry">
The first / is so that it resolves to the current host and the trailing / is optional (depending on your http server configuration.
I want to have the list of universities and after clicking on one of them, next to this list majors' list is supposed to show. After clicking on one of majors, next to those two lists list of subjects shows. However I did something wrong in routing I suppose. After clicking on one of universities URL changes but the list of majors doesn't show up. But after refreshing the page (with this url) it works perfectly fine. Here is the code:
http://jsbin.com/AQAref/1/edit
Like the other guys said, your jsbin doesn't work. It's pretty apparent the real problem is with your link-to. If it works when you refresh, but not when you click on a link then the difference is where the model is coming from. When you refresh, the model comes from the model hook. When you navigate using a link, the model was supplied by the link-to statement.
In your situation, if you refresh the page you get the majors of a specific university from your university model hook. If you click on the university from your page, the university model is sent to the university resource, not the majors of that university.
So either this needs to say majors
{{#each}}
<li {{bindAttr id="id"}}>
<div class="list-element-title">
{{#link-to 'university' this.majors}}{{name}}{{/link-to}}
</div>
</li>
{{/each}}
instead of
{{#each}}
<li {{bindAttr id="id"}}>
<div class="list-element-title">
{{#link-to 'university' this}}{{name}}{{/link-to}}
</div>
</li>
{{/each}}
Or your route needs to return the university, but I'm guessing the route model hook is correct since you said it works on refresh.
App.UniversityRoute = Ember.Route.extend({
model: function(params) {
var majors = universities.findBy('id', params.univ_id).majors;
return majors;
}
});
I didn't look through the rest of your code, but make sure you are sending the same model through the link-to as you would get if you got the model through the model hook.