Im following a tutorial on writing a marionette app in coffeescript with rails. Namely Brian Mann's Backbonerails tutorials if you are familiar with these. My global app object is not available on the window when I inspect with firebug.
My app.js.coffee
console.log #
#App = do (Backbone, Marionette) ->
App = new Marionette.Application
App.addRegions
headerRegion: "#header-region"
mainRegion: "#main-region"
footerRegion: "footer-region"
App.on "initialize:after", ->
if Backbone.history
Backbone.history.start()
App
my index.html.erb
<div id="header-region"></div>
<div id="main-region"></div>
<div id="footer-region"></div>
<%= javascript_tag do %>
$(function() {
App.start();
});
<% end %>
For the life of me I dont understand why I can console.log # and receive a reference to the window object, but my App object is not attached to the window. Also receive reference error in console for App reference in index.html.erb
my application.js manifest file
//= require jquery
//= require lib/underscore
//= require lib/backbone
//= require lib/marionette
**//= require backbone/app**
//= require_tree ./backbone/apps
Related
When in responsive mode, bootstrap dropdown works on intial page visit/refresh but when another page is visited (via the dropdown link or any page link) it drops down but doesn't go back up. This happens when the <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> is placed at the bottom of the body tag. Everything works fine when the javascript tag is moved to the head but this is not best practice as regards js files and DOM load. My bootstrap files are added manually and not with a gem. Why is this happening this way? Is there something I am missing?
Here is my application.js file arrangement
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
It's because of turbolinks.
Try "data-no-turbolink"
%ul.dropdown-menu{:role => 'menu', :'aria-labeledby' => "something", "data-no-turbolink" => true}
I am trying to implement toggle switches from http://www.bootstraptoggle.com/.
gem 'rails-bootstrap-toggle-buttons'
bundle
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .
and
*= require bootstrap-toggle-buttons
*= require_tree .
*= require_self
*/
view:
<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>
Is just giving me a plain checkbox. Any clues on why this would not be working?
First: you wanted to have the toggle switches from http://www.bootstraptoggle.com/ but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from http://www.bootstrap-switch.org/. This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.
Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.
But: the data-toggle initialization method also didn't work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:
$(document).on('ready page:change', function() {
$('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});
Note the page:change event, which is fired by Turbolinks, in addition to the ready event.
If you're using >Rails 4 and >Ruby 1.9
<%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>
Make sure that your HTML is being generated correctly.
<!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">
Then check the JavaScript console to make sure there are no errors.
And if you want to add style, simple do like:
<%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>
I am using Best In Place gem 3.03.
My view Page code:
<div class="container">
<h3> Name</h3>
<%= best_in_place #contact, :first_name %>
</div>
My coffee script :
users.coffee
jQuery ->
$('.best_in_place').best_in_place()
The First Name is coming as Mark or any Name that is in the Database but when I click it the input field is not displaying allowing me to edit the text.
application.js
//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.purr
//= require best_in_place
//= require best_in_place.purr
//= require_tree .
I found the Issue looks like I was including the jquery script twice one in application.js and once using javascript include tag.
Now I have used couple of hours to integrate rails work together with angular, and I am about to give up. I am following this tutorial:
link to tutorial
'
and I made it even simpler
In my application.js I require the following :
//= require jquery
//= require jquery_ujs
//= require angular
in my main.js.coffe I ask to get the following js files :
#= require_self
#= require_tree ./controllers/main
and in my app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee I have the same lines as he does in tutorial :
#IndexCtrl = ($scope) ->
$scope.title = "My blog"
So here is the funny part :
my "Master" view is exactly the same as in tutorial :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
So in theory when I run my app at http://localhost:3000/main/Index I should get the exact same result as he does, but no.
I am getting Runtime error, which says that it has failed at (in /app/assets/javascripts/main.js.coffee) and nothing else. I really can't figure out what exactly is going wrong. If I switch controller_name with some random string like 'hugabuga' page loads and of course angular wont work because there are no link to the controller Index.
I am not very experienced with cofee script, but maybe the way controller is defined is not correct?
In another tutorial I had to add another Gem
gem 'angular-rails-templates'
And also amend the application.js to include:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .
The order that the JS is listed is also important. Make sure you have the same in your file as what is shown in the video.
I'm in the process of intergrating Ember.js into an existing Rails app. Would like to begin by using Ember for just a single controller action dashboard#index. From there, I'm planning to integrate the rest of the site into the ember application, probably on a per controller basis.
But I'm having trouble managing the ember URLs, because I'm not yet ready to cede control of the Rails root route to Ember.
For example, I'd like the following routes to be handled by rails, w/o Ember:
/
/login
/logout
while:
/dashboard
should trigger the Ember application. Then, there would be various ember dashboard routes such as /dashboard/#/favorites and dashboard/#/upcoming
I've got alternate Rails layouts and paths through the asset pipeline set up just fine, but I'm finding the Ember router doesn't play nice if the ember routes are tacked on after a prefix such as /dashboard/.
Is there a clean way to set this up?
Thanks
inside your dashboard controller set layout false so that it ignores your application layout.
Then make your dashboard/index.html.erb file to create its own layout and include the ember application. It should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>ember app</title>
<%= stylesheet_link_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "ember_app" %>
</body>
</html>
then in your assets/javascripts/ you should have a file ember_app.js that looks like this:
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./components
//= require_tree ./templates
//= require_tree ./routes
//= require ./router
//= require helpers
# for more details see: http://emberjs.com/guides/application/
window.DashboardApp = Ember.Application.create()
A good resource i used is the ember-rails gem. It has good documentation as well.