我试图组织JS文件"rails way"时,在我的Rails 4应用程序中遇到了一个问题.他们以前分散在不同的观点中.我将它们组织成单独的文件,并使用资产管道进行编译.但是,我刚刚了解到,当打开turbo-linked时,jQuery的"就绪"事件不会触发后续点击.第一次加载页面时它可以工作.但是当你点击链接时,内部的任何内容ready( function($) {都不会被执行(因为页面实际上并没有再次加载).好解释:这里.
所以我的问题是:在启用turbo-links时,确保jQuery事件正常工作的正确方法是什么?您是否将脚本包装在特定于Rails的侦听器中?或者也许rails有一些魔力让它变得不必要?文档对于它应该如何工作有点模糊,特别是关于通过像application.js这样的清单加载多个文件.
我正在尝试src从变量设置iframe 的属性,我无法让它工作......
标记:
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
Run Code Online (Sandbox Code Playgroud)
控制器/ app.js:
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my …Run Code Online (Sandbox Code Playgroud) 我正在尝试将我的应用程序投入生产,图像和css资产路径无法正常工作.
这是我目前正在做的事情:
<%= stylesheet_link_tag "styles", media: "all", "data-turbolinks-track" => true %>RAILS_ENV=production bundle exec rake assets:precompile并且它成功了,我在public/assets目录中看到了指纹文件.当我浏览到我的网站时,我收到404找不到错误mysite.com/stylesheets/styles.css.
我究竟做错了什么?
更新: 在我的布局中,它看起来像这样:
<%= stylesheet_link_tag "bootstrap.min", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag "styles", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Run Code Online (Sandbox Code Playgroud)
生成源是这样的:
<link data-turbolinks-track="true" href="/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/stylesheets/styles.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-0c647c942c6eff10ad92f1f2b0c64efe.js"></script>
Run Code Online (Sandbox Code Playgroud)
看起来Rails没有正确地查找已编译的css文件.但是为什么它适用于javascripts(注意/assets/****.js路径)是非常令人困惑的.
我正在开始使用Bootstrap 3,我在理解如何使用网格类时遇到了一些麻烦.
这是我到目前为止所发现的:
看起来这些类col-sm-#和col-lg-#普通的不同之处col-#在于它们仅适用于屏幕超过一定大小(分别为768px和992px)的情况.如果省略-sm-或-lg-,div将永远不会折叠成一列.
但是,当我在一行内创建两个div时,col-sm-6它们似乎只是在窗口介于768px和992px之间时并排.换句话说,如果我将窗口一直缩小然后慢慢加宽,则布局为单列,然后是两列,然后再次返回单列.
<div class="col-sm-6 col-lg-6">)col-6 也包括在内?<div class="col-6 col-sm-6 col-lg-6">我正在使用默认导航栏,其中一些列表项是下拉列表.我无法点击触发下拉列表的链接.我知道我可以在下拉列表中添加重复的链接,但我宁愿不这样做.是否可以使头部链接成为可点击的链接(而不仅仅是下拉的句柄)?
有关参考,请参阅下面下拉列表中的第一个链接.我希望用户能够点击它并实际转到它指向的页面.
<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
<div class="navbar-header">...</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
I DONT WORK! <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/page2">Page2</a></li>
</ul>
</li>
<li><a href="#">I DO WORK</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Run Code Online (Sandbox Code Playgroud) 我想使用CSS样式来控制SVG设计的大小.例如...
.svg { width:100%; }
Run Code Online (Sandbox Code Playgroud)
当我从文件中嵌入SVG图像时,它就像任何其他图像一样工作并且工作正常:
<img src="image.svg" class="svg" />
Run Code Online (Sandbox Code Playgroud)
但是当我使用内联SVG时,它不起作用:
<svg class="svg">...</svg>
Run Code Online (Sandbox Code Playgroud)
svg"盒子"会增长,但内容保持不变.
有没有办法做到这一点?
AngularJS v1.2.26
Jasmine v2.2.0
如何更改或删除某个行为spyOn?当我尝试覆盖它时,我收到以下错误:Error: getUpdate has already been spied upon
var data1 = 'foo';
var data2 = 'bar';
describe("a spec with a spy", function(){
beforeEach(module('app'));
var $q;
beforeEach(inject(function(_updateService_, _$q_){
updateService = _updateService_;
//spy the results of the getUpdate()
$q = _$q_;
var deferred = $q.defer();
deferred.resolve( data1 );
spyOn(updateService, 'getUpdate').and.returnValue(deferred.promise);
}));
describe('and here the spy should be different', function() {
it('returns a different value', function() {
var deferred = $q.defer();
deferred.resolve( data2 );
spyOn(updateService, 'getUpdate'); //ERROR …Run Code Online (Sandbox Code Playgroud) 我正在构建一个Rails 4应用程序,我有一些分散的js文件,我试图包括"rails方式".我将jquery插件移动到/ vendor/assets/javascripts中,并更新了清单(application.js)以要求它们.当我在本地加载页面时,我看到它们正确显示.
但是,我从其中一个已编译的脚本中获得了不一致的行为.我有一个名为projects.js的特定于控制器的js文件,它通过以下方式在application.js中引用require_tree .:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .
Run Code Online (Sandbox Code Playgroud)
我看到文件被正确包含,并且它的工作时间有一半.另一半时间,projects.js中的东西似乎没有做任何事情(它主要是jquery动画和一些ajax请求).当它不起作用时,我会点击按钮几次,什么都不会发生,然后我会抛出这个错误:
Uncaught TypeError: Cannot read property 'position' of null
turbolinks.js?body=1:75
Run Code Online (Sandbox Code Playgroud)
当脚本处于各个视图(错误的方式)时,这种情况从未发生过,所以我很确定问题不在于我的javascript代码.另一个可能相关的细节是projects.js中的东西被包装在一个$(document).ready(function(){.此外,我正在开发模式下进行测试,因此javascripts和css不会被资产管道组合.
知道这里发生了什么吗?我是Rails的新手,但我已尽力遵守所有惯例.
更新!
当我的项目脚本不起作用时,它是可预测的.第一页加载每次都有效.然后我点击一个链接到一个使用我的project.js行为的新页面,第二个页面永远不会工作.我点击几次,最终抛出上面的错误.我仍然不确定为什么,但我怀疑这与涡轮连接有关.
我了解到,add_column可以:after选择设置列的插入位置.太糟糕了,我了解了它:添加了一堆之后.
如何编写迁移以简单地重新排序列?
我正在尝试安装rails应用程序,每次使用bundle它都会失败sudo.我目前的情况是,只要sudo用于包括轨道在内的所有东西,一切都能正常工作.我不认为这是正确的.
例如:
$ bundle update
Updating git://github.com/refinery/refinerycms.git
Fetching gem metadata from https://rubygems.org/.......
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Enter your password to install the bundled RubyGems to your system:
Using rake (10.0.4)
Using i18n (0.6.1)
Using multi_json (1.7.2)
Using rack-cache (1.2)
Using rack-test (0.6.2)
Installing hike (1.2.2)
Errno::EACCES: Permission denied - /usr/local/rvm/gems/ruby-1.9.3-p194/build_info/hike-1.2.2.info
An error occurred while installing hike (1.2.2), and Bundler cannot continue.
Make sure that `gem install hike -v '1.2.2'` …Run Code Online (Sandbox Code Playgroud) javascript ×5
css ×3
ruby ×3
angularjs ×2
html ×2
turbolinks ×2
bundler ×1
css3 ×1
iframe ×1
jasmine ×1
jquery ×1
macos ×1
migration ×1
svg ×1
unit-testing ×1