小编pil*_*lau的帖子

我有一个auto-carousel指令迭代链接元素的子元素.

然而,子节点尚未加载到DOM中,因为它们ng-if的表达式尚未被解析.

如何确保父指令知道它的DOM树有变化？

        <ul class="unstyled" auto-carousel>
          <li class="slide" ng-if="name">{{name}}</li>
          ...
          <li class="slide" ng-if="email">{{email}}</li>
        </ul>

我可以使用,$timeout但感觉不可靠.我也可以使用ng-show而不是ng-if但不回答问题,而不是我需要的问题.

作为具有良好动手AngularJS经验的开发人员,如何使用React调整在Flux中编写Web应用程序的心理模型？

我不是在寻找一个Flux + React和Angular的答案(已经很多在线),但我想知道这两个"思维模式"中最大的区别是什么:事先,我被引入了Angular Way ; 相比之下,什么是反应方式？

当我离开Angular宇宙并过渡到Flux时,我需要关注的关键事项是什么？

差异首先,现在有相似之处:AngularJS非常自以为是,并且有一些非常大的禁忌,比如 - 不要将UI/DOM代码放在控制器中.React的重大禁忌和意见是什么？

最后但并非最不重要的是,Facebook将Flux视为MVC的替代品,但正如我所看到的 - React是视图引擎,商店是专注于单个域的模型容器,调度程序和操作构成控制器.那么实际上这不是MVC的名字吗？

基本上,我们的想法是"sub"模块创建一个对象,该对象应该是作为"主要"模块的实用程序库的一部分.但是,"sub"对象依赖于"main"中的实用程序:

// Main module
define(['sub'], function(sub) {
    var utils = {
        utilityMain: function () {
           // ...
        };
        // ...
    };

    tools.subModule = sub;

    return tools;
});

// Sub module
define(['main'], function(main) {
    return new (function () {

        // Singleton object using functions in main module
        var somestuff = function () {
            main.utilityMain();
            // etc
        };
    })();
});   

我如何通过require.js实现这一目标,而不会产生吞噬整个星球的黑洞？

非常感谢你.

我解剖了ng-repeat并提取了附加的代码块,看到它们包含处理重复算法的逻辑(我想了解它是如何工作的).

我有很多问题,但由于它们都是关于ng-repeat的内部结构,所以我选择在这里问问它们.我认为没有理由将它们分成不同的SO问题.我已将每个问题引用的代码行标记为内联.

1. 为什么他们需要确保这trackById不是本机hasOwnProperty功能？(这就是该assertNotHasOwnProperty函数的功能,是Angular内部API的一部分)
2. 就我的直觉而言,这个代码在转发器中已有的项目上执行,当它必须更新集合时 - 它只是将它们拾取并将它们推入列表进行处理,对吧？
3. 此代码块显然在转发器集合中查找重复项.但它究竟是如何做到这一点超出了我.请解释.
4. 为什么角有存储块对象都nextBlockMap 和在nextBlockOrder？
5. 什么是block.endNode和block.startNode？
6. 我假设上述问题的答案将澄清这个算法是如何工作的,但请解释为什么它必须检查是否nextNode已经(已)'$$NG_REMOVED'？
7. 这里发生了什么？同样,我认为问题6已经为这一个提供了答案.但仍然指出了这一点.

就像我说的那样,我挖掘ng-repeat来找到我认为与重复机制相关的代码.另外,我理解指令的其余部分.所以不用多说,这里是代码(来自v1.2.0):

      length = nextBlockOrder.length = collectionKeys.length;
      for (index = 0; index < length; index++) {
       key = (collection === collectionKeys) ? index : collectionKeys[index];
       value = collection[key];
       trackById = trackByIdFn(key, value, index);

       // question #1
       assertNotHasOwnProperty(trackById, '`track by` id');

       // question #2
       if (lastBlockMap.hasOwnProperty(trackById)) {
         block = lastBlockMap[trackById]; …

Flux模型要求在视图中启动状态的任何更改,触发通过调度程序工作的操作并将商店传播回监听视图.

这一切都很好,花花公子.但是如果我需要在状态发生特定变化后执行一些DOM操作呢？在现实世界的应用程序中,我们有时必须使用它,你知道,称为jQuery插件的遗物(还记得吗？)

例如,我需要初始化一个jQuery视频播放器,点菜$('#videoContainer').initPlayer(streamURL),一个Ajax请求检索后 streamURL.请奉献一点时间来弄清楚如何,你会做到这一点与流量/反应,前阅读).

在视图部分,我可能会使用componentWillReceiveProps:

var jsVideoPlayer = React.createClass({
  componentWillReceiveProps: function(nextProps) {
    $(this.refs.videoContainer.getDOMNode()).initPlayer(nextProps.streamURL);
  },
  render: function() {
    return (
      <div ref="videoContainer">
      </div>
    );
  }
});

但是在这里,玩家每次状态更新时都会被初始化.这肯定会打破我们的视频播放器.因此,在实际执行任何操作之前,请检查URL是否已更改:

  componentWillReceiveProps: function(nextProps) {
    if (nextProps.streamURL && nextProps.streamURL !== this.streamURL) {
      this.streamURL = nextProps.streamURL;
      $(this.refs.videoContainer.getDOMNode()).initPlayer(nextProps.streamURL);
    }
  },

容易,对吗？但是大局呢？如果我们增加更多的功能和UI元素,那么我们可以扩大和扩展 - 这可能会导致更多自定义验证代码在视图中显示来自商店的内容.即使在一个完美的应用程序中,每个商店都拥有自己的域名,并且所有内容都在设计模式中一尘不染地布置在一个值得专注的宗教追随者的水平上,我们仍然必须在视图中使用越来越多的逻辑,因为应用程序会扩展.

在我们的团队中,我认为这个逻辑应该真正进入一个适合Flux模型的ControllerView--但其他人都认为这是框架应该关注的事情.我们是Flux/React的新手,并且无法想出如何让框架为我们做到这一点.

我一直在阅读关于这个过去1.5小时,还是没能找到一个简洁和决定性的答案.

据我所知,浏览器从右到左解析CSS选择器.

这意味着一个长的CSS选择器,如下所示:

.card .container .businesscard .pinfo li.pinfo-box span:first-child

是在SO中出现的效率最低的代码行之一.

首先,我是对的吗？

其次,我正在使用LESS设计一个丰富的UI,它最终会从我编码的嵌套设计中产生这种庞大的选择器.

可以做些什么来避免这种选择器？仅依靠课程和ID？但是,如果你不能编写嵌套的CSS,那么再次使用LESS的目的是什么？

感谢您的意见.

我如何将这个旧的jQuery代码组合到v1.7中.on()？

v1.3 .live():

    $('#results tbody tr').live({
    mouseenter:
       function () { $(this).find('.popup').show(); },
    mouseleave:
       function () { $(this).find('.popup').hide(); }
    });

v1.7 .on():

$('#results tbody').on('mouseenter', 'tr', function () {
    $(this).find('.popup').show();
});
$('#results tbody').on('mouseleave', 'tr', function () {
    $(this).find('.popup').hide();
});

我想将两个事件处理程序都传递给一个.on()调用,但保持精彩的事件委托.on()允许我这样做.

谢谢!

有没有办法捕捉GruntJS任务失败并采取行动？

该--force标志没有帮助,因为我需要知道的东西,一路上打破,并做一些事情.

我尝试了一些类似于try-catch的安排,但它不起作用.这是因为grunt.registerTask将任务推入队列 - 执行不是同步的.

  grunt.registerTask('foo', "My foo task.", function() {
    try {
      grunt.task.run('bar');
    } catch (ex) {
      // Handle the failure without breaking the task queue
    }
  });

欢迎创意javascript创意以及GruntJS专有技术.

比方说,我们有未知div容器width和height比身体的全尺寸.

此容器div包含未知数量的div.容器中的所有div都具有不同的大小,除了具有与以下3种类型之一相同的CSS之外:

• 类型1:所有div都浮动到左侧.
• 类型2:所有div都浮动到右侧.
• 类型3:所有div都有未知的绝对位置,甚至可以远离屏幕.

类型1和2 div具有边距,也可能有填充.类型3 div可以有,也可以两者都没有.

鉴于容器中div的类型是未知的 - 最终目标是在原始内部添加一个辅助容器,其大小足以容纳视口中的所有div(具有溢出:滚动).什么是最便宜的计算方法？

要注意的一些事项:

1. div 可能会也可能不会(作为一个整体)拥有box-sizing: border-box.这将影响它们的边框,边距和填充的呈现方式,也应该考虑在内.

2. 在类型1和2(浮动div)的情况下,div意味着水平堆叠 - 即,容器应该增长以适合它们的总宽度.这应该被考虑在内.

3. 例如,最右边的div上的右边距应该用于计算,并应该增加容器的宽度.顶部,底部和最左边的div也是如此.

4. IE8及以下版本不是必需的.

5. 请仅使用vanilla Javascript.没有像jQuery等框架.

谢谢!

一些可视化:

是否可以在Sublime Text或Webstorm中输入JSDoc样式的注释,如下所示:

/**
 * Repeat <tt>str</tt> several times.
 * @param {string} str The string to repeat.
 * @param {number} times How many times to repeat the string.
 * @returns {string}
 */

并生成如下函数定义:

function repeat (str, times) {
    return
}

？

反之亦然的操作也很好,我只是在寻找一种方法来节省额外的击键.

有没有办法知道渐进式Web应用程序是在后台还是在前台（即，它当前是该应用程序的焦点，还是“已最小化”）

在过去的两天中，对Google和SO进行搜索仅带来了有关如何在后台运行服务工作者的信息。谢谢！

我在关闭body标签之前调用Require.js:

    <script data-main="assets/scripts/src/main.js" src="assets/scripts/lib/requirejs/require.js"></script>
</body>

这是我的main.js内容:

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(), // override browser cache
});

require(['views/appView'], function (App) {
    App.initialize(); // this is just to test the module is actually loading
});

appView.js包含:

define([
    'modernizr',
    'jquery',
    'underscore',
    'backbone',
    'common', // this module has about 4 other dependencies too
    'dust',
    'routers/main',
    'views/main'
], function (Modernizr, $, _, Backbone, Common, dust, router, mainView) {
    // This is supposed to load, even if jQuery loads after the DOM ready …