小编fuz*_*nny的帖子

使用jQuery更改.prop不会触发.change事件

我在一个复选框上有一个事件监听器:

<input type="checkbox" name="something">
Run Code Online (Sandbox Code Playgroud)

我的事件监听器:

$('input[type="checkbox"][name="something"]').change(function() { 
    //DO SOMETHING 
});
Run Code Online (Sandbox Code Playgroud)

我有另一个事件监听器,更改.prop了复选框:

$('#button').click(function() { 
    $('input[type="checkbox"][name="something"]').prop("checked", false);
});
Run Code Online (Sandbox Code Playgroud)

当我检查复选框DO SOMETHING触发器时.当我点击#button,.prop更改,我看到取消选中的复选框,但DO SOMETHING没有被触发...

我忽视的东西?

jquery

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

有人可以解释Meteor.defer()的工作原理吗?

所以... Meteor.defer(function(){ // stuff })不在文档中:

https://github.com/meteor/meteor/issues/2176

这个链接似乎说它只是等同于

Meteor.setTimeout(function(){ // stuff }, 0);
Run Code Online (Sandbox Code Playgroud)

如果是这样的话,这怎么办,嗯,什么?它基本上是说"等待0 ms然后运行该功能".

所以...它立即运行该功能.

我在这里错过了什么?是这样的Tracker.afterFlush还是什么?在跑步之前,它是否以某种方式等待"事物"(什么样的事情?)完成?

meteor

10
推荐指数
1
解决办法
6729
查看次数

流星铁路由器 - Router.go回调可能吗?

我有一个我希望用户按下的链接.当他们按下它时,路由器将转到某个模板,然后运行Smoothscroll.js代码以设置动画并向下滚动到锚标记.

      //When the user clicks on the link to get to the #contact anchor...
      //The code below does not work.
      Router.go('index');
      $('html,body').animate({
          scrollTop: $('#contact').offset().top
      }, 1200);
Run Code Online (Sandbox Code Playgroud)

Router.go('index') 工作得很好.

      $('html,body').animate({
          scrollTop: $('#contact').offset().top
      }, 1200);
Run Code Online (Sandbox Code Playgroud)

在索引模板上也可以单独使用.

但是当我尝试一起运行它们时,路由器会转到索引,但滚动不起作用.

知道我怎么能这样做吗?

编辑

这就是我最新的Meteor 1.0+以及类似的路径 /#contact

Router.route('/', {
  name: 'index'
});

Router.onAfterAction(function() {
    var self = this;
    // always start by resetting scroll to top of the page
    $(window).scrollTop(0);
    // if there is a hash in the URL, handle it
    if (this.params.hash) {
        // now this …
Run Code Online (Sandbox Code Playgroud)

meteor iron-router

8
推荐指数
1
解决办法
1731
查看次数

如何从Meteor模板向Spacebars helper传递多个参数?

我还没有找到一个可靠的例子.

Template.registerHelper("itemLookup", function(sku, property){
  return Items.findOne({sku: sku})[property];
});
Run Code Online (Sandbox Code Playgroud)

我如何在模板上调用它?

我想做的事情如下:

{{ itemLookup sku="i3_4030U" property="title" }}
Run Code Online (Sandbox Code Playgroud)

它应该输出

"Intel Core i3 4030U"
Run Code Online (Sandbox Code Playgroud)

meteor spacebars

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

Tinder风格用Javascript拖动手势和拖放?

我正在试图弄清楚我可以使用什么库来进行仅使用Javascript的Tinder风格的拖放手势.

  1. 需要创建一个响应拖动手势的HTML元素..
  2. 触摸并按住时,允许元素跟随用户的手指.
  3. 当用户移开他的手指时,元素要么:

    动画回到原来的位置

    如果元素在释放时位于指定的放置区域上,则该元素将生成动画并消失,并且需要某种触发事件包含哪个元素被删除以及哪个放置区域被放入

我已经研究过HammerJS,但似乎并不支持掉落区域.

jQuery的Hover事件似乎不适用于手指.

javascript gestures

7
推荐指数
3
解决办法
9055
查看次数

使用Meteor,为什么DOM操作永远不应该使用jQuery?

我很好奇这句话的有效性:

一个好的经验法则是,如果你使用jQuery来操作任何DOM元素,你可能做错了.

从这个问题的答案:Meteor - 如何在帮助器和模板事件之间传递数据?

我认为它的方式,jQuery是好的,因为它可以手术和操作DOM的许多小部分,而无需更改整个代码块.

Meteor中的模板很棒,因为这正是他们所做的 - 他们可以将整个代码块或小小的东西换成其他东西,但是每次都必须明确地定义它并重新定义实际上不会改变的代码.

示例 - 在焦点上,jQuery删除了idleField类,添加了focusField类,并将占位符更改为其他一些文本:

<input class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10"/>

$('input[type="text"]').focus(function() {
  $(this).removeClass("idleField").addClass("focusField").attr("placeholder", "First Name NOW");
});
Run Code Online (Sandbox Code Playgroud)

结果是

<input class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" maxlength="10"/>
Run Code Online (Sandbox Code Playgroud)

jQuery很简短,很有针对性,只是为了切换类和占位符.

但是使用Meteor模板,结果会是这样的:

<input {{toggleClassAndEditPlaceholder}} maxlength="10"/>

Session.set('toggleClassEditPlaceholderSessionVar', ' class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" ');

Template.form.helpers({
  toggleClassAndEditPlaceholder: function() {
    return Session.get('toggleClassEditPlaceholderSessionVar');
)};

Template.form.events({
  'focus input[type="text"]': function () {
    Session.set('toggleClassEditPlaceholderSessionVar', ' class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" ');
  }
});
Run Code Online (Sandbox Code Playgroud)

Meteor的方式更冗长,至少在这个例子中,包括多余的项目(id,name和type不会改变,只有class和placeholder).jQuery只针对类和占位符,而只留下其他所有内容.然而,模板有时必须包含许多无关紧要的东西.在这个例子中,当然,我可以在我的代码中并排移动占位符和类,以便在定义模板时不改变id,name和type,但在其他一些代码中你将无法做到.

那么我做错了什么?是否应该有更高效的方式在Meteor中进行,一个比单一jQuery线更有效的方法?

jquery meteor

5
推荐指数
1
解决办法
2076
查看次数

如何在 Meteor 1.0 中有条件地加载/捆绑 CSS 文件?

我知道之前有人问过这个问题,但我想知道随着 1.0.0 的出现是否有所改变。

我不希望 Meteor 自动将应用程序中的每个 CSS 文件捆绑在一起。我的管理页面将具有与面向客户的页面完全不同的 CSS,并且使用命名空间似乎是一个非常复杂的解决方案。我如何让 Meteor 在某些页面上加载某些 CSS 文件而不在某些页面上加载某些 CSS 文件?

同样的问题也适用于 JS 文件。

我知道有人说这会很有用:

https://github.com/anticoders/meteor-modules

对这个条件 CSS 和 JS 包有什么意见吗?

meteor

5
推荐指数
1
解决办法
1411
查看次数

如何在某些JS触发之前等待&lt;object&gt;中的SVG完成加载?

我的html中有这个(SVG约为500K):

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>
Run Code Online (Sandbox Code Playgroud)

我正在GitHub上使用脚本为SVG创建视口,以便可以在视口内平移和缩放,但与GoogleMaps一样。

https://github.com/ariutta/svg-pan-zoom

因此,加载顺序必须为:

  1. svg-pan-zoom.js完成
  2. 全部500k的svg需要完成加载
  3. 需要运行以下代码:

    var panZoomArm = svgPanZoom('#arm');

不幸的是,以上代码在SVG未完全加载时运行,从而导致错误。

我已经尝试过了,但是.load似乎不是为它而设计的<object>-实际上debugger从未触发过

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});
Run Code Online (Sandbox Code Playgroud)

这些方法让我告诉代码仅在完全下载500k svg之后才能运行吗?

对于我而言,可靠地触发此代码的唯一方法是使SVG完全内联...因此,这就像几百行代码一样,无法缓存。

编辑 - -

好的,我可以使用它,但是我很困惑。

这不起作用(调试器从不触发):

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});
Run Code Online (Sandbox Code Playgroud)

这有效:

var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery svg

5
推荐指数
1
解决办法
4708
查看次数

使用Mandrill创建自定义Handlebars助手?

有没有办法用Mandrill定义自定义Handlebars助手?假设我有一个对象而且货币是美分.

  "products": [
    {
      "sku": "hdrPhotos",
      "price": 19000,
      "title": "Unlimited HDR Photography"
    },
    {
      "sku": "panos",
      "price": 2500,
      "title": "Panoramas / Virtuals"
    },
    {
      "sku": "fullVideo",
      "price": 43000,
      "title": "Full Video"
    },
    {
      "sku": "aerialDaytimePhotos",
      "price": 17500,
      "title": "Aerial Daytime Photography"
    },
  ]
Run Code Online (Sandbox Code Playgroud)

我有这个模板:

            <!-- BEGIN PRODUCT LOOP // -->
            {{#each products}}
            <tr class="item">
              <td valign="top" class="textContent">
                <h4 class="itemName">{{title}}</h4>
                <span class="contentSecondary">${{toCurrency price}}</span>
                <br/>
                <span class="contentSecondary sku"><em>{{sku}}</em></span>
                <br/>
              </td>
            </tr>
            {{/each}}
Run Code Online (Sandbox Code Playgroud)

我想采取price,以美分为单位,并编写一个自定义帮助器toCurrency,简单地将它除以100.

定制助手在标准把手中很容易做到,但是Mandrill能否利用它?

handlebars.js mandrill

5
推荐指数
1
解决办法
427
查看次数

为什么Ruby on Rails的URL Helper在我的URL中放了一段时间?

我在视图中有以下代码(RoR 4):

tbody
  - @order_submissions.each do |order_submission|
    tr
      td = order_submission.id
      td.table-actions
        span = link_to "Show", order_submissions_path(order_submission.id)
Run Code Online (Sandbox Code Playgroud)
td = order_submission.id 
Run Code Online (Sandbox Code Playgroud)

成功显示为ID号(533ab7337764690d6d000000)

但...

order_submissions_path(order_submission.id) 
Run Code Online (Sandbox Code Playgroud)

创建一个以下列形式出现的URL:

order_submissions.533ab7337764690d6d000000
Run Code Online (Sandbox Code Playgroud)

我想要它

order_submissions/533ab7337764690d6d000000
Run Code Online (Sandbox Code Playgroud)

那个时期从哪里来?

这是我的路线:

get 'order_submissions/:id'         => 'order_submissions#show'
Run Code Online (Sandbox Code Playgroud)

当我运行rake路线时,我得到:

GET    /order_submissions/:id(.:format)        order_submissions#show
Run Code Online (Sandbox Code Playgroud)

(.:格式)可能正在弄乱它,但我不知道为什么.我只是想让它在那里放一个斜线.

如果我将我的代码更改为此修复它:

 span = link_to "Show", order_submissions_path + '/' + order_submission.id
Run Code Online (Sandbox Code Playgroud)

但这是一个非常非常愚蠢的解决方法.

编辑:这是我的路线:

   get 'order_submissions'             => 'order_submissions#index'
   get 'order_submissions/new'         => 'order_submissions#new'
   post 'order_submissions'            => 'order_submissions#create'
   get 'order_submissions/:id'         => 'order_submissions#show'
   get 'order_submissions/:id/edit'    => 'order_submissions#edit'
   patch 'order_submissions/:id'       => 'order_submissions#update'
   get 'order_submissions/:id/delete'  => 'order_submissions#delete'
   delete 'order_submissions/:id' …
Run Code Online (Sandbox Code Playgroud)

ruby routes ruby-on-rails url-helper

4
推荐指数
1
解决办法
1719
查看次数