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?
Related
I've just finished building a nuxt.js & contentful website. There are several routes that need to be generated when people hit the website but it doesn't seem to generate all the routes or not recognise some pages unless I refresh. Example - I upload a blog post to contentful and it doesn't appear in the list of blog posts but when I change the text of a blog that is appearing with no issue, I have attached my config generate below
generate: {
routes () {
return Promise.all([
client.getEntries({
'content_type': 'product'
}),
client.getEntries({
'content_type': 'kebaProduct'
}),
client.getEntries({
'content_type': 'blogPost'
}),
])
.then(([productEntries, kebaEntries, blogEntries]) => {
return [
...blogEntries.items.map(entry => `/blog/${entry.fields.slug}`),
...productEntries.items.map(entry => `/products/${entry.fields.slug}`),
...kebaEntries.items.map(entry => `/products/ev-charging/${entry.fields.slug}`),
]
})
}
It works fine when I am on localhost and all the product routes are being generated and updated fine, only some of the 'kebaProduct' routes are being created when I run npm run generate. Not sure what I am missing
Note when I do generate although I have 5 'kebaProducts on contentful' it only generates one .html file not sure what the expected behaviour is.
Figured it out. If some content has been specified and it isn't present in the contentful code then the page will fail to be generated as it will throw an error. You can do checks with v-if for content and conditionally render it that way or make sure all fields are 'required' in the Contentful validations
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.
I am getting an error in Firebug console:
TypeError: $.on is not a function
$.on('ajax:success', 'a[data-remote]', function(xhr, data, status) {
which is line 8 of my modal.js file - see below. I am using code from gist.github.com/1456815.
I can find the relevant jQuery v1.7.2 minified code in application.js:
f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object")
jQuery and then my modal.js code is being loaded by the asset pipeline, so I don't understand the error, which shows in Firebug when my index page is loaded i.e. before I click on the link.
Versions: Ruby 1.9.3, gem 1.8.24, Rails 3.2.1, Rake 0.9.2.2
My application.js source:
//= require jquery
//= require jquery-ui
//= require jquery.dataTables
//= require TableTools
//= require ZeroClipboard
//= require datatable_highways
//= require datatable_localities
//= require datatable_neighbours
//= require_tree .
//= require modals
As per RailCasts #205 I have downloaded rail.js into /public/javascripts and renamed to jquery.rails.js. Frankly I don't understand this and it is not explicitly included in the asset pipeline. (There seems to be confusion about what to do with rails.js in the forums).
jquery.js is in /vendor/assets/javascripts.
Modal.js.coffee:
# This file should be "required" into your `application.js` via the Asset Pipeline.
$ ->
$modal = $('#modal')
$modal_close = $modal.find('.close')
$modal_container = $('#modal-container')
# Handle modal links with the data-remote attribute
$.on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
$modal
.html(data)
.prepend($modal_close)
.css('top', $(window).scrollTop() + 40)
.show()
$modal_container.show();
$.on 'click', '#modal .close', ->
$modal_container.hide()
$modal.hide()
false
Thanks
John
Do something like this instead:
$('#modal .close').on 'click', ->
# code
Or, even better, to use your code:
$modal_close.on 'click', ->
# code
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)
- form_for(#post, :remote => true, :id => 'post_form') do |f|
Works as expected in FF and Chrome, but IE just processes the submit action normally, without any ajax request.
Not really seeing any info on this on the rest of the internet so I imagine I've done something wrong somehow. Ive used both the default rails.js, and the jquery version from the github page
Well, I don't know why the default rails version doesn't work for me here on IE, but I wrote this as a workaround:
if ($.browser.msie) {
var form = $('form#new_post');
form.find('input#post_submit').bind('click', function(){
var data = form.serializeArray();
$.ajax({url: '/posts', type: 'POST', data: data});
return false
});
}
And now it's working correctly. Shouldn't something like this be included in rails.js if this is in fact a problem with Rails, and not something that I've somehow done?
In our Rails 3 app the form tagged as data-remote wasn't turned into an AJAX form any longer after we had upgraded to jquery-rails 1.0.19. IE7 wasn't able to load the jquery.js - there seems to be a problem with version 1.7.1 of jQuery currently. After downgrading to jquery-rails 1.0.18 the problem disappeared again.