小编And*_*aus的帖子

我喜欢Ruby的.tap方法是如何工作的.它可以让您轻松进入任何方法链而不会破坏链条.我让你操作一个对象然后返回对象,以便方法链可以正常继续.例如,如果你有foo = "foobar".upcase.reverse,你可以这样做:

"foo = foobar".upcase.tap{|s| print s}.reverse

它将打印upcased(但不反转)字符串,并像原始行一样继续进行反转和赋值.

我想在JS中有一个类似的功能,它可以用于一个目的:将对象记录到控制台.

我试过这个:

Object.prototype.foo = function() {
  console.log(this);
  return this;
};

通常,它可以工作(虽然它输出数字的数字对象而不是数字值).

但是当我使用一些jQuery时,它会破坏jQuery并停止页面上所有进一步的代码执行.

错误是这样的:

• 未捕获的TypeError:对象foo没有方法'push'
• 未捕获TypeError:Object function(){window.runnerWindow.proxyConsole.log("foo"); 没有方法'exec'

这是一个测试用例:http://jsbin.com/oFUvehAR/2/edit(取消注释第一行以查看它是否中断).

所以我想混淆对象的原型是不安全的.

然后,做我想要的正确方法是什么？将当前对象记录到控制台并返回对象以便链可以继续的函数.对于基元,它应该记录它们的值而不仅仅是对象.

我是一名前端开发人员,对Ruby很熟悉.我只知道如何以同步/顺序方式执行Ruby,而在JS中,我习惯于异步/非阻塞回调.

这是示例Ruby代码:

results = []
rounds = 5

callback = ->(item) {
  # This imitates that the callback may take time to complete
  sleep rand(1..5)

  results.push item

  if results.size == rounds
    puts "All #{rounds} requests have completed! Here they are:", *results
  end
}

1.upto(rounds) { |item| callback.call(item) }

puts "Hello"

目标是在不阻止主脚本执行的情况下运行回调.换句话说,我希望"Hello"行显示在"All 5 requests ..."行上方的输出中.此外,回调应该同时运行,以便最快完成的回调使其首先进入结果数组.

使用JavaScript,我只需将回调调用包装setTimeout为零延迟:

setTimeout( function() { callback(item); }, 0);

这种JS方法不实现真正的多线程/并发/并行执行.在引擎盖下,回调将在一个线程中顺序运行,或者在低级别上交错运行.

但是在实际级别上,它将显示为并发执行:生成的数组将按照与每个回调所花费的时间量相对应的顺序进行填充,即生成的数组将按每个回调完成所花费的时间排序.

请注意,我只想要异步功能setTimeout().我不需要内置的睡眠功能setTimeout()(不要与sleep回调示例中用于模仿耗时的操作混淆).

我试图探讨如何使用Ruby进行JS风格的异步方法,并给出了使用建议:

1. 多线程.这可能是Ruby的方法,但它需要大量的脚手架:

   1. 手动为线程定义数组.
   2. 手动定义互斥锁.
   3. 为每个回调启动一个新线程,将其添加到数组中.
   4. 将互斥锁传递给每个回调.
   5. 在回调中使用互斥锁进行线程同步.
   6. 确保在程序完成之前完成所有线程. …

我们使用的是fullPage.js,它提供了类似幻灯片的体验.我们将Vimeo iframe嵌入其中一个幻灯片中,这些幻灯片应该覆盖幻灯片的整个幻灯片.

一切都像Chrome中的魅力一样,但在Firefox和iOS中,无法滚动/滑动Vimeo iframe.fullPage只是不会对它做出反应.

我尝试用透明的div覆盖视频.同样,它适用于Chrome,但在iOS上,浏览器不允许您以编程方式启动视频,因此使用div覆盖视频会导致无法启动视频:Vimeo播放器说"未捕获错误:观看者必须首先启动播放. "

这个问题有解决方案吗？

以下是该问题的演示:http://jsbin.com/tunove/1/edit？html,output该视频位于第二张幻灯片上.滚动/滑动它不会在Firefox和iOS中切换幻灯片.

我按照Ember CLI主页上的说明创建了我的第一个Ember CLI插件.插件工作正常,它已经在Github上有几颗星:https://github.com/lolmaus/ember-cli-stained-by-children

问题是,如果没有Ember CLI,就不可能使用插件,例如,在http://emberjs.jsbin.com/上.

我已经看到其他插件没有这样的限制:该库实现为Bower包,可以使用或不使用Ember CLI,并且还提供了Ember CLI插件包装器.

这种插件的一个例子是Simple Auth.

它有三个存储库:

• 主要源代码:ember-simple-auth.
• 预编译的凉亭包:ember-simple-auth-component.
• Ember CLI包装器:ember-cli-simple-auth.

但是很难从中获取示例,因为Simple Auth是一个庞大的库.

问题是:

1. 我如何组织主要源代码,以便我可以从中构建不同的库类型(全局和Ember CLI友好的AMD)？
2. 如何组织Ember CLI包装器代码？我应该怎么做以利用图书馆？
3. 我如何自动发布版本？

我正在尝试更好地理解Ember SimpleAuth的Firebase身份验证器:

import Ember from 'ember';


export default Ember.Controller.extend({


actions: {
    login: function() {
        this.get('session').authenticate('authenticator:firebase', {
            'email': this.get('email'),
            'password': this.get('password')
        }).then(function() {
            this.transitionToRoute('index');
        }.bind(this));
    },
    logout: function() {
        this.get('session').invalidate().then(function() {
            this.transitionToRoute('login');
        }.bind(this));
    }
}
});

有人请解释".bind(this)"正在做什么,以及在这个特定实例中究竟绑定是如何工作的？

编辑:经过一番反思和研究,这是我对可能发生的事情的建议解释:

代码的".then"部分无法访问"this"的原始上下文.".bind(this)"将"this"(在本例中为当前控制器对象)的值设置为".then"函数内的"this".

这可以通过如下事实来证明:如果删除".bind(this)"部分,则代码的"transitionTo"部分不起作用.

另一方面,如果我们编写如下代码,我们不需要使用".bind(this)":

import Ember from 'ember';


export default Ember.Controller.extend({


actions: {
    login: function() {
    var _this = this;
        this.get('session').authenticate('authenticator:firebase', {
            'email': this.get('email'),
            'password': this.get('password')
        }).then(function() {
            _this.transitionToRoute('index');
        });
    },
    logout: function() {
      var _this = this; 
        this.get('session').invalidate().then(function() {
            _this.transitionToRoute('login');
        }); …

我想将背景应用于整个页面.当我向CSS添加代码时,没有任何反应,但是当我用HTML编写一些文本时,只有文本背后的部分被绘制为我之前在CSS中设置的颜色.

我正在使用Sass,当我排除app.css时,一切都正常(因为Foundation被排除在外).

这是我的CSS

/* line 5, ../sass/master.scss */
body {
  background: url("../img/bg.png");
}

/* line 8, ../sass/master.scss */
header {
background: black;
}

有谁知道解决方案？

我想在几个类中使用变量，所以我这样做：

$height: 100px

#foo
  height: $height

#bar
  height: $height

但这污染了全局变量范围，因此我想使用一个子范围。

当我有一个通用的元素容器时，它很简单：

#common-container
  $height: 100px

  #foo
    height: $height

  #bar
    height: $height

但是，此方法不是污染全局变量范围，而是污染最终的CSS：绝对不需要链接选择器。在某些情况下，元素没有通用的容器，因此这种方法根本不是一种选择。

我尝试通过使用虚拟mixin解决此问题：

=local-scope
  @content

似乎工作正常：

+local-scope
  $foo: foo

@warn $foo // -> Error: Undefined variable: "$font-size".

但是，如果在使用mixin之前声明了变量，它将被覆盖！:(

$foo: foo

+local-scope
  $foo: bar

@warn $foo // -> bar

问题是：如何正确地限制变量作用域而不弄乱全局名称空间，也不必不必要地链接选择器？

我有这些：

const element = this.getElementById("victim")

function releaseKraken(targetElement) {}

我希望element从DOM中删除该函数。

我可以想象这样的事情：

element.onRemove(() => releaseKraken(element))

我知道我需要MutationObserver，但是我发现的所有文档都集中在观察给定元素的孩子，而我需要观察元素本身。

UPD：问题如何检测从dom元素添加/删除的元素？ 专注于观察给定父母的孩子。我不想看孩子或父母。我想从DOM中删除给定元素时收到通知。不是孩子。而且我不想在给定元素的父对象上设置观察者（除非这是唯一的选择），因为这会影响性能。

UPD2：如果我将MutationObserveron 设置为on document，这将导致每个会话触发该回调数千次甚至数百万次，并且每次回调都必须过滤大量已删除元素以查看其是否包含有问题的元素。那太疯狂了。

我需要像上面显示的简单的东西。我希望回调仅被触发一次：给定元素被删除时。

我正在发现EmberJS并开始将现有网站迁移到此框架.我遇到了基于Bootstrap的下拉列表的问题.这个问题实际上帮助我理解了Ember的概念,但我仍然有一些问题.

我使用了ember-bootstrap模块来生成这个下拉列表(以及其他内容),这里的代码应该是:

{{#bs-dropdown as |dd|}}
  {{#dd.button}}
    Sort by
  {{/dd.button}}

  {{#dd.menu as |ddm|}}
    {{#ddm.item}}{{#ddm.link-to "index"}}Price low to high{{/ddm.link-to}}{{/ddm.item}}
    {{#ddm.item}}{{#ddm.link-to "index"}}Price high to low{{/ddm.link-to}}{{/ddm.item}}
  {{/dd.menu}}
{{/bs-dropdown}}

现在,我希望在用户点击其中一个项目时执行一些javascript代码.检查模块的文档后,我找到了菜单项组件的定义位置,并按如下方式编辑了代码:

export default Component.extend({
  layout,
  classNameBindings: ['containerClass'],

  /* ... */

  actions: {
    // My addition
    sortByPrice(param){
      alert("sorting");
    },
    // End of the addition

    toggleDropdown() {
      if (this.get('isOpen')) {
        this.send('closeDropdown');
      } else {
        this.send('openDropdown');
      }
    },
  },
});

然后我更新了hbs文件,如下所示:

{{#dd.menu as |ddm|}}
   {{#ddm.item action "sortByPrice" low_to_high}}

    {{#ddm.link-to "index"  action "sortByPrice" low_to_high}} …

我有一个包含之类的东西几个模块border-radius,$btnBgColor,up-arrow.

大多数其他模块需要import在一个地方或另一个地方,所以我想知道我是否可以import在SCSS编译器级别使用它们,以便我可以使用这些常用实用程序,就好像它们是内置的.

我使用的SCSS实现是pyscss.该Scss编译器的构造函数接受一个scss_files参数,我认为可以用来预先进口一些文件,所以我想是这样的:

  compiler = scss.Scss(scss_files={path: source})
  compiler.compile("a { background: $btnBgColor; }")

哪个没用.