Tag: coffeescript

更新arrays时模型的更改事件不会触发？

使用backbone.js …… @model.bind ‘change’, ()-> console.log ‘updated’ addIndex = (index) => array = @model.get(‘array’) array.push index @model.set array: array 这会完美更新模型，但不会触发更改事件。 有谁知道为什么从我发布的内容？ 编辑： 我添加了这个并触发了change事件： @model.set test: ” num = 0 setInterval ()=> num++ @model.set test: num , 3000 我添加了这个并且它不会触发更改事件： @model.set test: [] num = 0 setInterval ()=> console.log ‘testupdate’ num++ test = @model.get(‘test’) test.push num @model.set […]

bootstrap popover preventDefault for click在Rails 3.2应用程序中不起作用

有人在这里提出这个问题，但没有给出答案或解决方案。 这些引导程序文件列在application.js文件的顶部： … //= require bootstrap-tooltip //= require bootstrap-popover … 我的bootstrap_additions.js.coffee文件包含： $(“a[rel=popover]”).popover() $(“.tooltip”).tooltip() $(“a[rel=tooltip]”).tooltip() 在一个视图中我有： click 当我在浏览器中输入localhost：3000 / assets / application.js时，会出现bootstrap-popover.js内容。 另外我发现了以下内容： jQuery(function() { $(“a[rel=popover]”).popover().on(‘click’, preventDefault()); $(“.tooltip”).tooltip(); return $(“a[rel=tooltip]”).tooltip(); }); 单击链接后，浏览器显示将移至页面顶部。 当我向下滚动到链接时，会显示弹出窗口。 一切正常，除了preventDefault。 我错过了什么？ 谢谢。 更新：为了在我的代码中保持干净，我找到了所选答案的coffeescript版本 ： $(“a[rel=popover]”).popover().click (e) => e.preventDefault()

使用复选框，AJAX，jQuery更改属性

我希望更改我的Task资源的布尔属性，具体取决于是否选中了wether复选框。 我被困住了，因为我不知道该做什么……在添加这个AJAX复选框工作，整个CRUD，用rspec和capybara和bootstrapped测试的所有内容之前，我已经拥有了所有内容。 我有以下代码…… 意见/任务/ show.html.erb 27 true do |f| %> 28 29 30 这个：completed是Task的布尔属性。 Java脚本/ tasks.js.coffee 8 jQuery -> 9 $(‘#task_completed’).bind ‘change’, (event) => 10 $.post() 不知道如何完成这个$ .post（）的事情，以及如何在控制器中使代码工作……到目前为止我只有这个…… 控制器/ tasks_controller.rb 1 class TasksController [:show, :edit, :update] 6 7 def show 8 @title = @task.name 9 end 10 11 def new 12 @title = ‘New task’ […]

使用Remotipart解析错误

我正在使用remotipart使用ajax上传和升级图像，问题是当我编辑项目时，ajax更新数据，但remotipart（https://github.com/leppert/remotipart）返回图像的’解析错误’更新。 这就是我的表单的样子： = form_for(Achievement.new), html: {multipart: true , remote: true} do |f| = f.text_field :name = f.text_area :description = f.file_field :image = f.submit ‘Send’ 我正在使用单一表单来创建，编辑和删除“成就”。 这是我的js： constructor: -> $(‘.edit_button’).click -> $.ajaxSettings.dataType = “json” @id = $(this).data(‘id’) @content = $(this).parent() @name = $(‘.form_achievement #name’) @description = $(‘.form_achievement #description’) @image = $(‘.form_achievement .avatar img’) @button = $(‘.form_achievement […]

在Bookmarklet中使用jQuery UI

在CoffeeScript中，虽然此代码几乎与JavaScript相同： tabs_html = “GuidelinesTest something1something2” $(“#nm-toolbar”).append(tabs_html) $(“#nm-container”).tabs() 它不起作用。 有趣的是它在尝试最后一行时确实有效：来自控制台的$(“#nm-container”).tabs() 。 我附上下面的完整代码。 请注意，我正在使用CoffeeMarklet生成似乎仅适用于chrome的bookmarklet。 s1 = window.document.createElement(‘script’) s1.src = ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ window.document.body.appendChild(s1) $ -> s2 = window.document.createElement(‘script’) s2.src = ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js’ window.document.body.appendChild(s2) jqueryUIcss = window.document.createElement(‘link’) jqueryUIcss.rel = ‘stylesheet’ jqueryUIcss.type = ‘text/css’ jqueryUIcss.href = ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/blitzer/jquery-ui.css’ window.document.head.appendChild(jqueryUIcss) if $(“#nm-toolbar”).length == 0 toolbar = “” $(“body”).append(toolbar) $(“#nm-toolbar”).css({ ‘background’: ‘#fafafa’, ‘height’: ‘500px’, ‘width’: […]

使用JQuery文件上传到amazon S3，在客户端调整图像大小

我已经在互联网上看到了一些例子： 这个和这个 ，但是我正在关注RailsCast剧集＃383上传到Amazon S3 ，在video的最后他提到了使用javascript在客户端调整图像大小， 当然。 问题是，如果我按照他的例子，我无法实施。 我正在使用gem jquery-fileupload-rails 编辑 ：我注意到我在JQuery-fileupload示例中缺少一些JS 来调整图像页面的大小 ，但仍然没有工作。 我对application.js的要求 //= require jquery-fileupload/vendor/jquery.ui.widget //= require jquery-fileupload/vendor/load-image //= require jquery-fileupload/vendor/canvas-to-blob //= require jquery-fileupload/jquery.iframe-transport //= require jquery-fileupload/jquery.fileupload //= require jquery-fileupload/vendor/tmpl //= require jquery.fileupload-process //= require jquery.fileupload-image //= require jquery-fileupload/locale 我的post.js.coffee http://pastebin.com/9sm7UtsP jQuery -> $(‘#fileupload’).fileupload add: (e, data) -> types = /(\.|\/)(gif|jpe?g|png)$/i file = […]

如何阻止远程表单提交？

我有一个可以远程和正常使用的表单。 = form_for @comment, html: { class: ‘comment-form’ }, remote: request.xhr? do |f| = f.text_area :body = f.submit 我希望表单仅在body textarea具有内容时才提交： $(document).on ‘submit’, ‘.comment-form’, (e) -> text = $(this).find(‘#comment_body’).val() false if text.length < 1 当表单不是Ajax时，该代码有效。 但是当它处于远程状态时，它会失败并且表单仍然会提交。 为什么？ 我也尝试过： if text.length < 1 e.preventDefault() false 我正在使用带有Turbolinks的Rails 4。 更新：我尝试绑定ajax:beforeSend事件，它仍然提交： $(document).on ‘page:load’, ‘.comment-form’, -> $(this).bind ‘ajax:beforeSend’, -> alert “hi” […]

已禁用按钮仍会侦听单击事件

我在一个表格中遇到问题，我会进行一些jqueryvalidation。 如果未填写特定输入字段，则应通过添加禁用属性来禁用“前进”按钮： if errors $(‘.btn-move-forward’).attr(“disabled”, true) 虽然有效，但我在该按钮上也有一个点击事件：（coffeescript） $(‘.btn-move-forward’).click -> $(‘#step2, #step3’).toggle() 我希望.btn-move-forward在按钮被禁用时不会触发click事件，但确实如此！ 第一：我不明白为什么，因为每个浏览器规范都定义了这不应该发生。 无论如何，我试图通过做以下事情绕过它： $(‘.btn-move-forward’).click -> if !$(this).is(:disabled) $(‘#step2, #step3’).toggle() 或这个 $(‘.btn-move-forward’).click -> if $(this).prop(“disabled”, false) $(‘#step2, #step3’).toggle() 或者像这样组合事件监听器： $(‘.btn-move-forward’).on ‘click’, ‘.btn-move-forward:enabled’, -> $(‘#step2, #step3’).toggle() 不，所有这些都无法正常工作。 该按钮仍然表现为前进按钮。 如果它被禁用，我想要的是没有收听onclick的按钮。

咖啡脚本不会在页面更改时触发，但适用于页面加载。

我在我的rails项目中使用coffee脚本，但问题是它只在我加载（刷新）页面而不是页面呈现时才有效，它也应该在页面视图更改时起作用。 这是我正在使用的脚本： facebook.js.coffee jQuery -> $(‘body’).prepend(”) $.ajax url: “#{window.location.protocol}//connect.facebook.net/en_US/all.js” dataType: ‘script’ cache: true window.fbAsyncInit = -> FB.init(appId: env[“app_id”], cookie: true) $(‘#sign_in’).click (e) -> e.preventDefault() FB.login (response) -> window.location = ‘/auth/facebook/callback’ if response.authResponse $(‘#sign_out’).click (e) -> FB.getLoginStatus (response) -> FB.logout() if response.authResponse true

更新meteor模板后运行function

我有一个meteor模板渲染一些我需要执行jquery函数的html。 现在，我已经设置了一个依赖项，这样每次绑定到该模板的数据（对象列表）都会发生变化时，该函数就会运行。 我不确定这是我正在尝试做的最好的方法，但每次添加/删除/重新排列对象时它都会运行该function，所以这是一个开始。 但是 ，该函数似乎在重新呈现模板之前正在运行，因此前一组块得到了jquery-fied，但是我刚刚在该操作上添加的任何块都没有。 有没有办法强制函数在呈现/更新模板后运行？ 任何帮助深表感谢！ （类似的问题在这里 – meteor反应jquery – 但它没有任何答案） 以下是一些可能相关的代码位： Template.showPictures.rendered = Deps.autorun () -> album = Albums.findOne(Session.get(“selectedAlbum”)) if (album) pictures = album.orderedPictures() MyApp.loadJQuery() Template.showPictures.helpers pics: -> MyApp.myDependency.depend() album = Albums.findOne(Session.get(“selectedAlbum”)) album.orderedPictures() （为什么我的Template.rendered中的自动运行？不确定。这似乎是一个好的地方，但这是我第一次真正处理依赖关系，所以我可能完全偏离这里。任何想法出了什么问题会很棒。）