Intro
This is my first attempt at Ember (existing rails app) and there are some great resources out there on the interWeb, but given that I have read them all and am still wanting more it would be great to check notes here.
I have a new model: Newslink
I have built an api for it: api/v1/newslinks.json
The api works: http://localhost:3000/api/v1/newslinks.json
Data
{"newslinks":[{"id":1,"title":"A Sample Post","navlink":"This will be a simple post record."}]}
Code
The issue is that Ember seems to be letting the route slip through its hands (something I did wrong in the code below, I'm sure):
application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require chosen-jquery
//= require bootstrap
//= require bootstrap-notify
//= require jquery.limit-1.2.source
//= require bootstrap-switch
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require app
app.js
App = Ember.Application.create({
LOG_TRANSITIONS: true,
ready: function() {
console.log('App ready');
}
});
App.Router.map(function() {
this.resource('newslinks', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('newslinks');
}
});
App.NewslinksRoute = Ember.Route.extend({
model: function() {
return App.Newslink.find();
}
});
DS.RESTAdapter.reopen({
namespace: 'api/v1'
});
App.Store = DS.Store.extend({
revision: 13
});
App.Newslink = DS.Model.extend({
name: DS.attr('string')
});
Application.handlebars
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember - Latest" />
<meta charset=utf-8 />
<title>Ember Latest</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Here I am</h2>
</script>
</body>
</html>
Routes.rb
App::Application.routes.draw do
namespace :api do
namespace :v1 do
resources :newslinks
end
end
I'm not even trying to return the data yet. Just want to see the route connect, but I'm getting a routing error. How do I make sure Ember sees the url "/newslinks"?
Let me know if you have any suggestions. Thanks!
Random Unrelated Observation
Ember.js seems a lot like reading Borges' Labyrinths, a good thing, and I can tell it will get much better on subsequent readings until everything just makes perfect sense.
I would use chrome see what URL Ember is requesting. It is likely requesting '/newslinks' which is incorrect based on what you indicated your url was '/newslinks.json'
In which case I would change the route from '/newslinks.json' to a more appropriate REST url format of '/newslinks'
To make it work redirect from your IndexRoute (which is implicit and created automatically) to your newslinks route sonce you have in your router map / as a path for your newslinks resource.
For example add this to your app and it should work:
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('newslinks');
}
});
Working Demo.
Hope it helps.
Related
I'm on Rails 5.2, MacOS 10.13.4, ruby 2.3.7p456. I am following this guide for implementing jquery datatables. Both in development and production, the tables load without datatable formatting, but after a browswer refresh, the tables display perfectly with the datatable formatting. I'm installing using the CDN.
Here is a screenshot on inital load:
Then after refresh:
My application.html.erb:
<head>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
In my html the table has id = 'search'
the search.coffee file:
$(document).ready ->
$('#search').DataTable()
return
and finally the application.js file:
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
I have tried moving the CDN scripts from the application.html.erb to the show page, removing the load jquery script, and using different versions of jquery in the load jquery script. I've tried on Chrome Version 67.0.3396.79 and Safari Version 11.1. All of these resulted in no change.
Has anyone run into this? I saw this question: and tried adding gem 'jquery-turbolinks' to gemfile and adding //= require jquery.turbolinks to application.js, and after bundle install and restarting the server, still no change.
Responding on this from the answer over here - Rails 5: how to use $(document).ready() with turbo-links
At some point the $(document).ready call was depreciated with turbolinks, try:
$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
I completely removed turbolinks from my app in order to get the datatables to act properly.
Before Famo.us completely changed their architecture I was developing some Apps using Famo.us, RequireJS, EJS Templates, Node and some other stuff.
But now when I come to replace the old Famo.us architecture with the new Famo.us 'Engine' I am getting errors - which tells me the architecture is wrong for the new approach - so wondered if you guys can help me.
Background
Server is Node.js, Express 4 and some other stuff
Client will be Famo.us, EJS Templates and some other stuff
The current approach is that the '/' Router calls an 'ejs' template.
index.ejs:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="/css/famous.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<script data-main="/js/webmain.js" src="/js/vendor/requirejs/require.js"></script>
</body>
</html>
This worked fine with old Famo.us architecture...and would call the webmain.js script using RequireJS.
webmain.js:
/* globals require */
require.config({
baseUrl: "js",
nodeRequire: require,
paths: {
"famous": "vendor/famous",
"famous-flex": "vendor/famous-flex/src",
json2: "vendor/json2",
"requirejs": "vendor/requirejs/require",
"socketcluster": "vendor/socketcluster",
"ua-parser" : "vendor/ua-parser.min",
"uuid": "vendor/uuid"
}
});
require(["platform"]);
The 'platform.js' script would contain the following:
define('platform', function(require, exports, module) {
'use strict';
var Engine = require("famous/core/Engine");
var contentContext = Engine.createContext();
var Widget = require('app/widgets/DefaultWidget');
var mainView = new Widget();
var contextSize = [undefined, undefined];
contentContext.setPerspective(1);
Engine.nextTick(function() {
contextSize = contentContext.getSize();
mainView.setOptions({size: [contextSize[0], contextSize[1]]});
contentContext.add(mainView);
});
contentContext.on('resize', function(e) {
contextSize = contentContext.getSize();
if (mainView) mainView.setOptions({size: [contextSize[0]*1, contextSize[1]*1]});
}.bind(this));
});
But the new version of Famo.us will not work using this approach and I wanted to ask your thoughts as to why, or if there was another way they have not mentioned?
I have updated the Famou.us source code in 'vendor/famous' to use the 'Famo.us Engine' code from github. If I replace the old Famo.us code in the 'platform.js' script with new Famo.us code - like this:
define('platform', function(require, exports, module) {
'use strict';
var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
FamousEngine.init();
var scene = FamousEngine.createScene();
var node = scene.addChild();
var domEl = new DOMElement(node, {
content: 'Hello World',
properties: {
fontFamily: 'Arial'
}
});
});
I get the following errors:
Uncaught Error: Module name "Clock" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught Error: Module name "../utilities/CallbackStore" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught TypeError: Cannot read property 'init' of undefined platform.js:28
I guess I am trying to understand, when the RequireJS skeleton is pretty much the same, why it doesn't work? Why Famo.us is undefined, and why the new Famo.us architecture can break so much - and what the 'new' way of integrating famo.us would be?
I have asked questions on their 'slack' IRC but it doesn't seem to be a way to get answers and a really poor 'help'.
Any help would be greatly appreciated as I am really stuck from moving forward at the moment.
Thanks again.
Famo.us version 0.3.5 and earlier used RequireJS using AMD.
The new version 0.5.0+ uses the node.js flavor of CommonJS and uses Browserify to build a bundle of your javascript application for the browser.
The following from an Answer in this question sums it up. More about their similarities and differences in the answers.
RequireJS implements the AMD API (source).
CommonJS is a way of defining modules with the help of an exports object, that defines the module contents.
This is the question that I've had ever since I started studying Ember to see how it might work with Rails.
Rails has a routes.rb file with any number of existing routes.
Ember has its own separate set of routes.
How does the browser know to look for an Ember route when the route does not exist in rails?
It would seem logical that rails would need to redirect the browser to Ember, but I have not seen that written up anywhere.
In most cases where there's an existing rails app, the route in routes.rb plays the role of turning the resource into an api and that makes the data available through a url.
That part was easy. I can see the data using that url.json
I am now at the stage of trying to get the browser to recognize one single route (of many existing in rails) through Ember routing.
This does not have anything to do with showing the data. I just want to see the template render.
I get the feeling that the route is just magically recognized by the browser (without any mention of Ember routing in routes.rb) based on what's happening behind the scenes in the Ember framework, but that's not what I've experienced in reality.
I keep getting a routing error:
Started GET "/newslinks" for 127.0.0.1 at 2013-08-08 12:44:30 -0700
ActionController::RoutingError (No route matches [GET] "/newslinks"):
Here is my application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require chosen-jquery
//= require bootstrap
//= require bootstrap-notify
//= require jquery.limit-1.2.source
//= require bootstrap-switch
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require app
Here is my app.js:
App = Ember.Application.create({
LOG_TRANSITIONS: true,
ready: function() {
console.log('App ready');
}
});
App.Router.map(function() {
this.resource('newslinks', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('newslinks');
}
});
App.NewslinksRoute = Ember.Route.extend({
model: function() {
return App.Newslink.find();
}
});
DS.RESTAdapter.reopen({
namespace: 'api/v1'
});
App.Store = DS.Store.extend({
revision: 13
});
App.Newslink = DS.Model.extend({
name: DS.attr('string')
});
I've been told that this should actually be working, but it's not. Not sure where else to turn for help at this point, so if you have any recommendations or have a little time and want to freelance on the issue, please let me know.
Edit
Adding routes.rb for reference:
namespace :api do
namespace :v1 do
resources :newslinks
end
end
How does the browser know to look for an Ember route when the route does not exist in rails?
It doesn't. When you enter a url in browser, it will make request to the server, then rails should respond with some content. So in this case when the "/newslinks" url is requested you want rails to respond with an HTML page that includes your ember application.
When that page is loaded, the ember app will boot up and from there the ember-router will be used to handle links within the context of your ember app.
Make sense?
I feel that I'm missing something very stupid but I was stucked all day with this and didn't found anything to sorted it out. I want to load a map with an user marked in it when a fancybox lightbox is called, the following code is the best and minimal approach that I have but I'm getting:
ReferenceError: Can't find variable: google
= link_to image_tag('map.png'), map_vendor_path(#coupon.vendor), class: 'js-show-map'
:javascript
$(document).ready(function(){
$('.js-show-map').fancybox({
onComplete: function(){
Gmaps.loadMaps();
Gmaps.map.addMarkers([{"lng": "7.859409", "lat": "48.023551"}]);
}
});
});
the following view is called when click in link
map.html.haml
//
it's here just for test
= stylesheet_link_tag 'gmaps4rails.css'
= javascript_include_tag "gmaps4rails/gmaps4rails.base"
= javascript_include_tag "gmaps4rails/gmaps4rails.googlemaps"
= gmaps4rails(#vendor.to_gmaps4rails)
= yield :scripts
application.js
...
//= require_tree ./templates
//= require_tree ./gmaps4rails
application.css
//= require gmaps4rails
I checked head source code and I see
<script src="/assets/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
Map loads fine when not in the lightbox. Any help will be appreciated, thanks.
I guess the problem is the following:
you click the fancybox
it retrieves gmaps4rails html and scripts
external scripts aren't loaded on the fly
So you should:
include manually the js dependencies in your root view
disable the external js dependencies inclusion (not mandatory though)
I was trying to load a simple google map in my rails application.
The problem is that the web page show only an empty web page.
Here is my index.html.erb
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<%= javascript_include_tag 'testmap.js' %>
<body onload="initialize(); ">
<div id="map_canvas"></div>
This is my testmap.js which is in "public/javascripts":
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: chicago,
zoom: 11,
mapTypeId: 'roadmap'
});
}
The page displayed is completely empty, except for the code loaded from application.html.erb
I hope that you can help me.
Thank you
Use something like Firebug for Firefox in order to see if your JS files are loaded or not.
Maybe something like $(document).ready(function() {} is necessary (You have to wait that your content is loaded before executing your JS).