Develop Reference

Ember js - how to create a shared uitility

I am writing code to detect breakpoints via js using match media. In plain js, I know how to create a separate utility for this and consume it, but in Ember, how do I go about it, would I need to create a helper or something else.
Plain JS code:
define('viewportDimension', function() {
var viewportSize ={
mqMaxTablet : '959px',
isTablet: function(){
if(matchMedia){
var mq = window.matchMedia("(max-width:" + this.mqMaxTablet+ ")");
mq.addListener(this.viewportChanged);
this.viewportChanged(mq);
}
},
viewportChanged: function(mq){
if(mq.matches){
return true;
}
}
};
return viewportSize;
});
Ember Controller:
isTablet: function (){
viewportDimension.isTablet();
}.property('')
I understand the above code will not work. I dont know how to make it more Ember'ish type. The "isTablet" property should be set to true, as soon as the media query match is done.
Started converting my plain js to emberish (as below), but dont know how to proceed.
define('viewportDimension',function(){
var viewportSize = Ember.Object.extend({
isTablet: function(){
alert("1");
}.property('')
});
return viewportSize;
});
Ember.Application.initializer({
name: 'viewport-dimension',
initialize: function(container,app){
require('viewportDimension',function(object){
app.ViewportDimension = object
})
}
})

Please take a look at simple-breakpoint-detector

Session Set and Get in Meteor

I am trying to dynamically get and set a pageTitle for my sample Meteor app, ideally I'd like to use jQuery, but any other solution would be good too.
I am trying to do it the rough way by setting a session when a certain div class exists on the page, but it's not working for some reason.
Basically, I have this:
Template.layout.helpers({
pageTitle: function() { return Session.get('pageTitle'); }
});
And I want to do something like
if ($('section').hasClass('single')) {
Session.set('pageTitle', 'Post Page');
}
Any idea ho to make this work? thanks!

You need to call it in a controller or the templates rendered section like this:
Template.layout.helpers({
pageTitle: function() {
return Session.get('pageTitle');
}
});
// set when a page template renders
Template.posts.rendered = function() {
setPageTitle("Blog Posts");
};
// or with Iron Router on *every* route using some sort of variable
Router.onBeforeAction(function() {
var someDynamicValue = "FOO";
setPageTitle(someDynamicValue);
});
// or in an IronRouter Controller
PostsController = RouteController.extend({
onBeforeAction: function() {
setPageTitle("Blog Posts");
}
});
// helper function to set page title. puts a prefix in front of page, you
// could opt set a boolean to override that
function setPageTitle(titleName) {
var prefix = "My Site - ";
if ($('section').hasClass('single')) {
Session.set('pageTitle', prefix + titleName);
}
}

As #Kuba Wyrobek pointed out, I needed to use the Template.layout.rendered function.
Here's a snippet that works
Template.postsList.rendered = function(){
Session.set('pageTitle', 'Listing Page')
};

Ember.js - I want an Action event (on="") to trigger when there is a transition to a new Route

I want an Action event (on="") to trigger when there is a transition to a new Route.
I've seen the list of Action event handlers and closest I could find is attaching the action to the largest HTML element on the page and triggering it with 'Mousemove". This is a terribly flawed away of going about what I want to do.
So just to draw it out.
<div {{action 'displayEitherHtml1or2'}} class="largestDOMelement">
{{#if showHtml1}}
// html 1 inside
{{/if}}
{{#if showHtml2}}
// html 2 inside
{{/if}}
</div>
'/objects' is a list of objects and clicking one leads to 'object/somenumber'. The action should automatically trigger when I enter the 'object/somenumber' page.
UPDATE: I've taken the contents from the previous update and dumped them into my DocRoute, but nothing it being triggered when I transition to 'doc' through {{#link-to 'doc' this.docID}} {{docTitle}}{{/link-to}}
VpcYeoman.DocRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
toggleLetterSwitch: false,
togglePermitSwitch: false,
activate: function () {
var docTemplateID = this.get('docTemplateID');
if ( docTemplateID == 2) {
this.set('toggleLetterSwitch', true);
this.set('togglePermitSwitch', false);
console.log('docTemplateID equals 2');
} else {
this.set('toggleLetterSwitch', false);
this.set('togglePermitSwitch', true);
}
}
});
UPDATE DOS: setDocID is set in the DocsController to 1. Here's the whole thing.
VpcYeoman.DocsController = Ember.ArrayController.extend({
tempDocId: 1,
actions: {
addDoc: function (params) {
var docTitle = this.get('docTitle');
var docTemplateID = 1;
var docTemplateID = this.get('tempDocId');
console.log(this.get('tempDocId'));
var store = this.store;
var current_object = this;
var doc = current_object.store.createRecord('doc', {
docTitle:docTitle,
docTemplateID:docTemplateID
});
doc.save();
return true;
},
setDocId: function (param) {
this.set('tempDocId', param);
console.log(this.get('tempDocId'))
},
}
});

As #fanta commented, it seems like you're looking for the activate hook within your Route. This gets called when you enter the route where you define it. If you want to call it on every transition, you might consider defining a base route for your application and extending that instead of Em.Route:
App.BaseRoute = Em.Route.extend(
activate: function () {
// Do your thing
}
);
App.YourRoutes = App.BaseRoute.extend()
It's possible that there's a more appropriate place/time to do this, but without knowing quite what your action does, this is probably the best guess.
ETA: Looking at your edit, you won't want all your routes to extend App.BaseRoute the way I did it above; you should probably just include that activate hook explicitly in the routes which need it.

How do I hide dynamic elements in Meteor?

So I have a bunch of templates that will be iterated with {{#each game}} showing the following template:
<template name="game">
{{#if condition}}
<div class="box">
Page 1
</div>
{{else}}
<div class="box">
Page 2
</div>
{{/if}}
</template>
I want to display "Page 2" when the "Page 1" box is clicked, so I have the following:
Template.game.events({
'click .box': function(e) {
Session.set("condition", true);
}
});
But I do not want all of the other game templates to transition to Page 2, just the one that was clicked. How do I accomplish this?
EDIT: The change should only affect the current user, not all users.

Assuming your games are stored in a Meteor.Collection, and condition is a property on the documents that should reflect for all users, not just the current one, you can do something like this:
Template.game.events({
'click .box': function(event, template) {
Games.update(
{_id: template.data._id},
{$set: {condition: !template.data.condition}}
);
}
});
If it should only affect the current user, you can use a template-instance specific session variable and return it with a helper function called condition:
Template.game.events({
'click .box': function(event, template) {
Session.set("condition-" + template.data._id, true);
}
});
Template.game.condition = function() {
return Session.get("condition-" + this._id);
};
You could achieve similar functionality with a local collection.

Don't use Session variables! The very reason is the problem you have, they're equivalent of the old global variables. Use template's data instead, it's local and can be used to control the behavior like you want in this case.
For the template in your example:
Template.game.created = function() {
this.data.conditionValue = 'something';
this.data.conditionDep = new Deps.Dependency();
};
Template.game.condition = function() {
this.conditionDep.depend();
return this.conditionValue;
};
Template.game.events({
'click .box': function(e, t) {
t.data.conditionValue = 'somethingElse';
t.data.conditionDep.changed();
},
});

I also feel using a session with id doesn't sound like the best idea, and found this answer which seems to be better than using session: Using Meteor sessions to toggle templates

Running an ember controller function when route loads to set property that controls a checkbox

I have set up an ember checkbox:
{{view Ember.Checkbox checkedBinding='isChecked'}}
This checkbox is bound to this controller:
App.SettingsController = Ember.Controller.extend({
isChecked: false,
isItChecked: function(){
var me = this;
$.getJSON('ajax/checkIfUseLowRes.php', function(data){
//console.log(data);
//me.isChecked = data;
me.set('isChecked', data);
//console.log(me.isChecked);
})
},
sendSetting: function(){
var isChecked = this.isChecked;
//this.set('isChecked', !isChecked);
console.log(isChecked);
$.post('ajax/setLowRes.php', {useLowRes: isChecked});
App.nameSpace.set('needsRefresh', true);
}.observes('isChecked')
});
Essentially it is a checkbox which posts a setting, my problem is setting the original state of the checkbox. When I load the route, I want to have isItChecked() run to set the checkbox's original state.
Example:
1. I go in to settings, click the checkbox
2. I leave the site and come back to the settings page
Here is where I want the isItChecked() function to run to query the server and see if the setting is set
If it is set, the get request returns true, I want the checkbox to be checked, hence setting me.isChecked to data (true)
as of right now I can't figure out how to do this, can anyone help me?
I've tried setting it in my App.SettingsRoute's model, but that doesn't seem to be able to run the function in my controller.
Thanks.
JSBin:http://jsbin.com/ukuwiq/1/edit

One way to accomplish this is by using the route's setupController method.
App.SettingsRoute = Ember.Route.extend({
setupController: function(controller, model) {
$.getJSON('ajax/checkIfUseLowRes.php', function(data){
console.log('setting isChecked to: ', data);
controller.set('isChecked', data);
})
}
})
This should get the job done with the fewest changes to your existing code but does have some drawbacks and is not exactly the-ember-way. Probably it would make more sense to have a model object that represents your settings, move ajax code to that model object and use the route's model hook to trigger as needed. See ember-without-ember-data for an example of how that can work.

as Mike says, you can use 'setupController' or you could also use this:
App.SettingsRoute = Ember.Route.extend({
activate: function() {
this.controllerFor('settings').isItChecked();
}
})

Could you not just use the init function? e.g.
App.IndexController = Ember.ObjectController.extend({
init: function() {
console.log("function run");
},