Seems like this should be obvious but...How can you use a famo.us surface as a link to another webpage?
I've tried:
this.fooSurface.on("click", function(){
window.location.replace("www.foo.com");
});
but this doesn't replace the URL, it just puts the new URL on the end of the address currently in the URL bar. window.location.href = "www.foo.com" has the same result.
EDIT: window.location.assign("www.foo.com") and window.location = ("foo") also have the same result. I think this has something to do with this script in the boilerplate index.html:
<script type="text/javascript">
require.config({baseUrl: 'src/'});
require(['main']);
</script>
Use window.location.assign("http://www.foo.com"); instead.
I probably wouldn't use the replace() method personally, as replace() switches the current page's place in the document history with that of the one you provide to the method, which I can't say I've ever found beneficial as a user unless there's a blank intermediary login page or something very specific (and temporary).
Or you can even just use window.location = "http://www.foo.com";
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
I was able to get things working just fine with the boilerplate generator-famous gives you.
The script tag has nothing to do with it. That's configuration for RequireJS to load in the famo.us library with AMD.
var logo = new ImageSurface({
size: [200, 200],
content: '/content/images/famous_logo.png',
classes: ['backfaceVisibility']
});
logo.on('click', function() {
window.location.href ='http://www.google.com';
});
This problem you're having is also not a famo.us problem. It's your Javascript...
Related
I am using Ember i18n in my app. I also want to use the translation strings in the controllers (in most cases in an alert or confirm message). How can this be done ?
See http://jsfiddle.net/cyclomarc/36VS3/2/
Clicking on the button should alert "info" and not "T1005" ...
<script type="text/x-handlebars">
{{t T1005}}<br>
<button {{action 'clickMe' content}}>{{t T1005}} - Click me</button>
</script>
CLDR.defaultLanguage = 'en';
App.ApplicationController = Ember.Controller.extend({
clickMe: function(){
alert('T1005');
}
})
I know that a possible workaround is to no longer use alert and confirm and replace them by for example the bootstrap alternatives. However, I could imagine that in certain cases you will want to do something with the strings in Javascript (e.g. update a certain label via jQuery or so).
Any ideas on how to use the i18n strings in the controllers is helpful. Using an i18n library is only usefull if all aspects of the application can be translated ...
Just found the solution. Just access the string via Ember.I18n.t("T1005");
JSFiddle updated: http://jsfiddle.net/cyclomarc/36VS3/7/
Might be late here, but what about using the Em.I18n.TranslateableProperties mixin as documented here ?
You could do something like :
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T1005',
clickMe: function(){
alert(this.get('message'));
}
});
In the template, {{message}} will also hold the translation.
The solution that works to me is the following (using Ember I18n):
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T001',
showMessage: function(){
alert(this.get('message'));
}
});
The answer from cyclomarc didn't work for me (it's from 2013, which might be related), but it pointed me in the right direction:
this.container.lookup('service:i18n').t('my.translation.id')
I'm having quite the problem with Handlebars.JS as it is not replacing {{anything}} with the corresponding variables.
I have the following helper function:
function compileTemplate(name){
return Handlebars.compile($('#'+name+'-template').html());
}
Which I use in the following Backbone view:
Soccer.Teams.Li = compileTemplate('team-li');
Soccer.Router = Backbone.Router.extend({
routes: {
"": "index"
},
index: function(){
Soccer.container.html(compileTemplate('main'));
var teams = new Soccer.Teams.View();
var container = Soccer.container.find('.sub-content');
container.html(teams.render().$el.html());
var teamsList = container.find('#teams-list');
teams.teams.forEach(function(team){
teamsList.append(Soccer.Teams.Li(team.toJSON()));
}, this);
Soccer.page.trigger('pagecreate');
}
});
And #team-li-template is the following:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id="{{id}}"><a>{{name}}</a></li>
</script>
The correct information is definitely being passed, if I console.log the .toJSON it does contain the correct information, but nothing is replaced, the tags are just turned into nothing.
Any ideas?
Thanks!
Update:
Strangely enough I copied all of my code to a JSFiddle and it worked fine:
http://jsfiddle.net/vcrhh/1/
The actual app is 54.235.201.41 (sorry, wouldn't let me add it as a link).
Also tried just saving the code as a file locally and running it, that works fine too.
User username: mkremer90#gmail.com and password test for both. See anything wrong with the actual app? Why would it work in JSFiddle/local and not in my app?
The Handlebars and Backbone looks fine and the fiddle runs so the problem is with your testing environment. When I look at the page source on your server, I see this:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id=""><a></a></li>
</script>
Note the conspicuous absence of braces. I'd guess that something server-side is eating your braces. You say that you're using Django so Django's templates are probably causing your problem.
I would like to change emberjs's onEvent which is the trigger to perform the associated view action. There seems to be just 2 options for onEvent: the default enter, and keypress. I'd like to know if I can have other options as well, such as focusOut.
Small question
But first, I couldn't even get the non-default option to work:
Myapp.TextField = Ember.TextField.extend({
onEvent: 'keypress'
});
The text field didn't respond to key presses, but continued to respond to enter.
Actual question
How can we let ember.js text field respond to other onEvents to trigger the action specified in the view. This is something I'm expecting:
HBS:
<script type="text/x-handlebars" id="themodel">
{{view Myapp.TextField action="targetAction" valueBinding="myText"}}
</script>
JS view:
Myapp.TextField = Ember.TextField.extend({
// is this possible?
onEvent: 'focusOut'
});
JS controller:
Myapp.ThemodelController = Ember.ArrayController.extend({
targetAction: function(){
var usertext = this.get('myText');
// do stuff with the usertext ...
}
});
A workaround solution for the "Actual question"
This is a work-around as it doesn't modify onEvent, but directly lets focusOut trigger the targetAction:
JS view:
Myapp.TextField = Ember.TextField.extend({
focusOut: function(){
this.get('controller').set('myText', this.get('value')).targetAction();
}
});
But I really don't like this cumbersome implementation, so please let me know if there is a way to utilize onEvent with focusOut. Thanks.
I experienced something similar to your "small problem", only instead of the text field only responding to enter, it would respond to neither keypresses nor enter.
The solution lies within mavilein's answer to this question - the word "keypress" must be in camelCase, i.e "keyPress". This applies whether it is used as a property name when extending the Ember.TextField class, as you had originally attempted, or as an attribute on the actual view element as Mike had suggested. I tried it both ways. Hope this helps.
But first, I couldn't even get the non-default option to work
Strange. There is a test for exactly this behavior. Suggest having a look and see what's different in your use case.
How can we let ember.js text field respond to other onEvents to trigger the action specified in the view.
Following the same pattern used in Ember.TextField's insertNewLine fx
Myapp.TextField = Ember.TextField.extend({
onEvent: 'focusOut',
focusOut: function() {
sendAction('focusOut', this, event);
}
});
Ember.View has a nice method called .appendTo("#container") which would allow me to specify a container div for the view. However, when I use the router and .connectOutlet method, an instance of my view is created automatically based on convention and is added to the page body element by default. Is there a way to configure the class definition of the view so that upon creation it will be inside my desired #container. Here is my view:
Jimux.BuildsView = Em.View.extend({
templateName: 'builds',
appendTo: '#jimux-header', #this was just a guess and did not work. but does some propery like this exist for the view?
tagName: 'div',
listVisible: true,
...
Another way to ask this question is: how do I tell Ember router to append a view to a particular item in the dom? By default the router appends the view to the body.
And here is the router bit:
# Connect builds controller to builds view
router.get('applicationController').connectOutlet("builds","builds", Jimux.buildsController)
To clarify, I dont want to put my whole Ember app in a container. I have several views in my application, and most of them are fine directly in the body. But there are a couple like the one mentioned in this question, which I want to put inside "#application-header" div.
You can specify the root element for your application object.
window.App = Ember.Application.create({
rootElement: '#ember-app'
});
Edit:
Having re-read your question, I think you should look into named outlets, so you could do something like:
<div id="application-header">
{{outlet builds}}
</div>
{{outlet}}
well..after understanding your question, i remember having same trouble. Also, thing is i didn't find any way to do this even after going through the Ember code. But later i understood that its for good purpose only. I know you already might have come across with handlebars with which we can acheive this. If we give a view a ID to get appended, we are constraining the application and the whole use of ember becomes useless. Ok coming to you question, as far as i know, we can acheive that appending mustache templates in you div element of HTML.
<div id="jimux-header">
{{view Jimux.BuildsView}}
</div>
This way we can use the Jimux.BuildsView where ever you want and as many times possible. The Beauty of Ember you have to say...
Just add rootElement in the application object.
var App = Ember.Application.create({
rootElement: '#container'
});
I've made a simple website for my daughter.
It is in Dutch and for every page there is a English version as well.
Dutch URL: nl/index.html
English URL: eng/index.html
What I would like to do is give the visitor the option to set one language as preference. So if they come to this site the next time they will automatically linked to the preferable page.
I know this can be done with a cookie and saw the explanation on this forum ( How to remember the currently clicked url? javascript?PHP? ).
I've tried to make this work but apparently I am doing something wrong?
Can somebody guide me through step by step? That would be great!
Kind regards,
Jurgen
If you are familiar with jQuery you can use the cookies plug-in to persist the user's language choice and redirect him to the appropriate page every time he comes back to your site. Bellow is a sample code that uses two buttons to set the language:
First you declare the jQuery scripts (I use to store them in a Script folder, hence the following):
<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../Script/jquery.cookie.js"></script>
Then you define the page ready event like this:
$(function () {
var url = 'your_url';
var english_page = 'eng/index.html';
var dutch_page = 'nl/index.html';
if ($.cookie('default_page') != null) {
if (window.location.href != url + '/' + $.cookie('default_page')) {
window.location.href = url + '/' + $.cookie('default_page');
}
}
$('#set_english_butt').click(function () {
$.cookie('default_page', english_page, { expires: 999 });
alert('English was set as the default language');
});
$('#set_dutch_butt').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
});
Which is hooked to some html buttons in you page:
<div>
<span>Select your language:</span>
<button id="set_english_butt">English</button>
<button id="set_dutch_butt">Dutch</button>
</div>