小编eme*_*his的帖子

Rails 4:如何使用带有turbo-links的$(document).ready()

我试图组织JS文件"rails way"时,在我的Rails 4应用程序中遇到了一个问题.他们以前分散在不同的观点中.我将它们组织成单独的文件,并使用资产管道进行编译.但是,我刚刚了解到,当打开turbo-linked时,jQuery的"就绪"事件不会触发后续点击.第一次加载页面时它可以工作.但是当你点击链接时,内部的任何内容ready( function($) {都不会被执行(因为页面实际上并没有再次加载).好解释:这里.

所以我的问题是:在启用turbo-links时,确保jQuery事件正常工作的正确方法是什么?您是否将脚本包装在特定于Rails的侦听器中?或者也许rails有一些魔力让它变得不必要?文档对于它应该如何工作有点模糊,特别是关于通过像application.js这样的清单加载多个文件.

javascript jquery asset-pipeline turbolinks ruby-on-rails-4

417
推荐指数
9
解决办法
17万
查看次数

如何从AngularJS中的变量设置iframe src属性

我正在尝试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)

html javascript iframe angularjs angularjs-directive

210
推荐指数
3
解决办法
23万
查看次数

Rails 4:未在生产中加载的资产

我正在尝试将我的应用程序投入生产,图像和css资产路径无法正常工作.

这是我目前正在做的事情:

  • 图片资产位于/app/assets/images/image.jpg中
  • 样式表位于/app/assets/stylesheets/style.css中
  • 在我的布局中,我像这样引用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路径)是非常令人困惑的.

ruby ruby-on-rails asset-pipeline ruby-on-rails-4

116
推荐指数
6
解决办法
11万
查看次数

了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)

我正在开始使用Bootstrap 3,我在理解如何使用网格类时遇到了一些麻烦.

这是我到目前为止所发现的:

看起来这些类col-sm-#col-lg-#普通的不同之处col-#在于它们仅适用于屏幕超过一定大小(分别为768px和992px)的情况.如果省略-sm-或-lg-,div将永远不会折叠成一列.

但是,当我在一行内创建两个div时,col-sm-6它们似乎只是在窗口介于768px和992px之间时并排.换句话说,如果我将窗口一直缩小然后慢慢加宽,则布局为单列,然后是两列,然后再次返回单列.

  1. 这是预期的行为吗?
  2. 如果我想要超过768px的两列,我应该同时应用这两个类吗?(<div class="col-sm-6 col-lg-6">)
  3. 应该col-6 包括在内?<div class="col-6 col-sm-6 col-lg-6">

html css css3 twitter-bootstrap twitter-bootstrap-3

85
推荐指数
5
解决办法
13万
查看次数

Bootstrap 3:如何使导航栏中的下拉链接头部可点击

我正在使用默认导航栏,其中一些列表项是下拉列表.我无法点击触发下拉列表的链接.我知道我可以在下拉列表中添加重复的链接,但我宁愿不这样做.是否可以使头部链接成为可点击的链接(而不仅仅是下拉的句柄)?

有关参考,请参阅下面下拉列表中的第一个链接.我希望用户能够点击它并实际转到它指向的页面.

<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)

javascript css twitter-bootstrap-3

67
推荐指数
6
解决办法
12万
查看次数

是否可以使用CSS扩展内联SVG?

我想使用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"盒子"会增长,但内容保持不变.

有没有办法做到这一点?

css svg

53
推荐指数
1
解决办法
7万
查看次数

使用Jasmine进行角度单元测试:如何删除或修改spyOn

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)

javascript unit-testing jasmine angularjs karma-jasmine

51
推荐指数
5
解决办法
3万
查看次数

Rails 4 turbo-link阻止jQuery脚本工作

我正在构建一个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行为的新页面,第二个页面永远不会工作.我点击几次,最终抛出上面的错误.我仍然不确定为什么,但我怀疑这与涡轮连接有关.

javascript turbolinks ruby-on-rails-4

47
推荐指数
2
解决办法
3万
查看次数

Rails 4迁移:如何重新排序列

我了解到,add_column可以:after选择设置列的插入位置.太糟糕了,我了解了它:添加了一堆之后.

如何编写迁移以简单地重新排序列?

ruby migration ruby-on-rails ruby-on-rails-4

38
推荐指数
1
解决办法
1万
查看次数

如果没有sudo,Bundler无法安装任何宝石

我正在尝试安装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)

ruby macos ruby-on-rails bundler osx-mountain-lion

34
推荐指数
4
解决办法
4万
查看次数