I'm trying to integrate HammerJS v2.0.2 with EmberJS 1.6.1.
I used many code samples but non of them work, I get different errors. lets take the simplest one.
I implemented this view:
ListApp.ScrollerView = Ember.View.extend({
setupTap: function() {
var self = this;
this.hammer = new Hammer(this.get('element'));
console.log(this.get('element'));
var tap = new Hammer.Tap();
tap.set('enable', true);
this.hammer.add(tap);
this.hammer.on('tap', function() {
console.log('before tap!');
self.tap();
});
}.on('didInsertElement'),
tap: function() {
console.log('tap!');
}
});
but I get the following error after the page is loaded:
Uncaught TypeError: Object.keys called on non-object
any idea why I see this?
Here is working bin with hammer integrated to a view.
Here's the relevant code on how you integrate hammer into a view
App.Hammer = Em.View.extend({
templateName: 'hammer',
setupTap: function() {
Hammer(this.$()[0]).on("tap", this.tap.bind(this));
}.on('didInsertElement'),
tap: function() {
alert('My tamplate name is ' + this.get('templateName'));
}
});
Related
I'm using Firebase as the backend for my Ember app and successfully hooked up Firebase with EmberFire. However, when I try to save my models after creating a record, while they are posted to Firebase, they are not updated in the client's ember template.
My code for the action handler before I realized this was:
actions: {
publishPost: function() {
var newPost = this.store.createRecord('post', {
title: this.get('post.title'),
body: this.get('post.body'),
timestamp: new Date()
});
newPost.save();
}
}
And my code to try and solve this (but that doesn't work) by catching the promise returned by the save() and find() methods is:
actions: {
publishPost: function() {
var newPost = this.store.createRecord('post', {
title: this.get('post.title'),
body: this.get('post.body'),
timestamp: new Date()
});
this.store.find('post').then(function(posts) {
posts.addObject(newPost);
posts.save().then(function() {
newPost.save();
});
});
}
}
Am I just not handling the logic in the above code correctly to update the template or is there another Firebase/EmberFire compatible solution for this?
On https://github.com/broerse/ember-cli-blog-fire I did this:
import Ember from "ember";
export default Ember.ObjectController.extend({
actions: {
createPost: function() {
var newPost = this.get('store').createRecord('post');
newPost.set('date' , new Date());
newPost.set('author' , 'C.L.I. Ember');
this.get('target').transitionTo('post', newPost.save());
}
}
});
transitionTo can handle the newPost.save() promise.
Try it on: http://exmer.com/bloggrfire/posts
I am trying to create EmberJs / RequireJs application and ran into a problem. According to examples, I defined my app.js like this:
(function () {
define(['../app/routing'], function (routing) {
return {
Router: routing,
LOG_TRANSITIONS: true
};
});
}());
, routing.js as:
(function (root) {
define(["ember"], function (Ember) {
var router = Ember.Router.extend({
todosRoute: Ember.Route.extend({
viewName: 'todos',
model: function(){
return this.todos.find('todos');
}
})
});
return router;
});
}(this));
and main.js:
require(['app', 'ember'], function(app, Ember){
var app_name = config.app_name || "app";
root[app_name] = app = Ember.Application.create(app);
The problem I have is that no matter how I define my routes, I cannot get them to work, emberJs also reports, that such routes do not exist.
How can I define routes and pass them to Application.create(obj) as argument object? If possible, I would still like to keep them in separate file.
Please note, that routing.js should be executed before main.js, therefore App object is not available like it is suggested in tutorials
js/app.js
App = Ember.Application.create();
App.Router.map(function() {
this.route('index', {
path: '/'
});
this.route('about');
});
App.IndexRoute = Ember.Route.extend({
//
});
I know you'll want to pull these all out into different files, but have you been able to make things work in a simple environment?
As far as the Require JS stuff... I don't know much about that - but there seems to be a thread here: Ember.js and RequireJS that gets to the bottom of it.
Make your router.js file look like this:
(function (W) {
'use strict';
define([
'ember'
], function (Ember) {
var Router;
Router = Ember.Router.extend();
Router.map(function () {
var _this = this;
_this.route('index', {path: '/'});
_this.route('todos', {path : '/todos/'});
});
return Router;
});
})(window);
For individual route, add a new file.
(function (W) {
'use strict';
define([
'ember',
'models/todosModel'
], function (Ember, TodosModel) {
var TodosRoute;
TodosRoute = Ember.Route.extend({
model: function () {
return TodosModel;
}
});
return TodosRoute;
});
})(window);
Add the individual routes to object returned by your app.js.
My app has a page where I'm using the view to display the data from other template with my view like this :
<script type="text/x-handlebars" data-template-name="enquiry">
[...] // some other information display before
{{view App.EnquirySelectedVehicleView}}
</script>
<script type="text/x-handlebars" data-template-name="selectedVehicle">
// Here is my content
</script>
My map looks like this :
this.resource('enquiry', { path: '/enquiry/:enquiry_id'}, function() {
this.route('selectedVehicle');
});
After reading the doc I just did this in my view :
App.EnquirySelectedVehicleView = Ember.View.extend({
templateName: 'selectedVehicle'
});
So far so good, its showing the text from my template. But I need to return data from an ajax call in this template (selectedVehicle) automatically, like its fetching the data when you are on /enquiry/1/.
I've done this in my router :
App.EnquirySelectedVehicle = Ember.Object.extend({});
App.EnquirySelectedVehicleRoute = Ember.Route.extend({
model: function() {
console.log('DEBUG: SelectedVehicle Model');
App.SelectedVehicle.vehicleStock(this)
}
});
App.EnquirySelectedVehicle.reopenClass({
vehicleStock: function(that) {
console.log('DEBUG: Fetch vehicle stock');
// Here come the ajax call
}
});
But my issue is that route is never call.. How can I return some value from my selectedVehicleRoute when I'm on the /enquiry/1 page in a view template ? (not sure if I ask it correctly)
Thanks for the help !
[edit]
#Fanta : I think I begin to understand how I can do that :
App.EnquiryRoute = Ember.Route.extend({
beforeModel: function(transition) {
this.controllerFor('login').send('isSession', transition);
},
model: function(param) {
var promise = new Ember.RSVP.Promise(function(resolve, reject) {
var modelData = {enquiry: {}, vehicleStock: {}};
Ember.$
.get(host + '/enquiry/' + param['enquiry_id'], function(data) {
console.log('DEBUG: Enquriry GET OK id = ' + param['enquiry_id']);
modelData.enquiry = data.enquiry;
Ember.$.get(host + '/vehiclestock/' + data.enquiry.VehicleStockId, function(data) {
console.log('DEBUG: VehicleStock GET OK id = ' + data.enquiry.VehicleStockId)
console.log(data);
modelData.vehicleStock = data.vehicleStock;
resolve(modelData);
});
});
});
return promise;
}
});
It seems to work, now I have to figure it out how to display my Object :) but thank you for your help, that actually make me resolve it by a different way !
For future reference, just go to https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md and you'll see two links, one to JSFiddle and one to a JSBin with the basic setup.
Are you sure the route is not being called ? I created a Fiddle, http://jsfiddle.net/NQKvy/817/ if you check the JS console, you'll see in the log:
DEBUG: SelectedVehicle Model
DEBUG: Fetch vehicle stock
I feel like this should be pretty straight-forward, but I'm unable to get the contents of a controller in a different view. Here is my code:
App.MapView = Ember.View.extend({
elementId: ['map-canvas'],
didInsertElement: function() {
var self = this;
var controller = this.get('controllers.markers');
}
});
If I console.log(controller) I get undefined.
In a controller I would do something like:
App.MarkersController = Ember.ArrayController.extend({
needs: ['map']
});
App.MapController = Ember.ObjectController.extend({
plot: function() {
var markers = this.get('controllers.markers');
}
});
You place the needs on the controller that needs another controller, and where you'll be accessing the other controller.
And from a view, in order to grab the controller you do this.get('controller') and the controllers object lives on the controller, so controller.controllers.markers
Additionally, the view is only created with the controller by default if ember creates it, if you are doing something like {{view App.MapView}} it isn't creating the MapController and associating it with it, it's using the controller that was in scope when you created the view.
App.MapView = Ember.View.extend({
elementId: ['map-canvas'],
didInsertElement: function() {
var self = this;
var controller = this.get('controller.controllers.markers');
}
});
App.MarkersController = Ember.ArrayController.extend({
});
App.MapController = Ember.ObjectController.extend({
needs: ['markers'],
plot: function() {
var markers = this.get('controllers.markers');
}
});
Check out this implementation of it:
http://emberjs.jsbin.com/ODuZibod/1/edit
I am using the X-editable library with ember. It dynamically creates a view when a button is clicked. In such a situation, what is the correct way to deal with callbacks from this view. Should I create callback functions on my View and hook them up to the dynamically created view using the didInsertElement hook? The view element is not declared in a template and therefore I can't hook it up using an action.
Here's an example of what I've got at the moment. It's working fine, but I'm wondering if there is a better way:
App.NewsItemView = Ember.View.extend({
templateName: 'cms/news_item',
tagName: 'li',
onDateSave: function(e, params) {
self.get('content').set('date', params['newValue']);
},
didInsertElement: function() {
var elementID = this.get('elementId');
var editDate = $("#" + elementID + " .edit-date");
editDate.editable({
autotext: 'never',
display: false,
send: 'never'
});
var self = this;
editDate.on('save', function(e, params) {
self.onDateSave(e, params);
});
}
});