我想知道是否有一个polyfill支持IE11中的contenteditable输入事件？

我特别谈到这个事件:http://jsfiddle.net/ch6yn/

无论来源如何,只要在可信任的 div 上发生变化,就会触发(例如复制/粘贴/拖放/类型等).

<div contenteditable="true" id="editor">Please type something in here</div>
<script>
document.getElementById("editor").addEventListener("input", function() {
    alert("input event fired");
}, false);
</script>

1. 我有HTML模板文件(下划线模板语法)
2. 这些文件以HTML格式保存,因此易于编辑(IDE语法高亮显示)
3. 我不想用ajax获取它们,而是将它们全部组合起来并将它们作为js文件包含在内.
4. 使用GULP作为我的任务运行器,我希望以某种方式将所有 HTML 组合成这样的东西,作为我可以包含在我的BUILD过程中的javascript文件:

template_file_name 是HTML文件名.

var templates = {
   template_file_name : '...template HTML string...',
   template_file_name2 : '...template HTML string...',
   template_file_name3 : '...template HTML string...'
}

我真的不知道如何处理这个,以及如何从所有文件创建这样的文本..我可以将每个单独的文件转换为字符串,但我怎么能把它放在一个对象中？

更新 - 10月25日,15日 - ES6模块:

对于那些希望您的模板作为ES6模块的人,我创建了gulp-file-contents-to-modules

演示输出:

export var file_name = "This is bar.";
export var file_name2 = "This is foo.\r\n";
export var my-folder__file_name = "This is baz.\r\n";

我的所有NPM包都与使用gulp组合模板文件有关:

1. https://www.npmjs.com/package/gulp-file-contents-to-keys
2. https://www.npmjs.com/package/gulp-file-contents-to-modules
3. https://www.npmjs.com/package/gulp-template-compile-es6

问题

添加节点,同时从DOM中删除旧节点,不会丢弃内存中的旧节点.(至少不是所有人,没有明显的理由).

如何看待这种情况

(你已经知道了,但无论如何..)
右键单击输出区域并使用Chrome 开发人员工具进行检查.单击时间轴选项卡,然后单击左上角的圆圈(点)开始录制.

现在点击body元素,它将每隔300ms 开始添加和删除项目
(删除的节点应该被垃圾收集).

停止录制,将数据采样区域扩展到最大,您将在屏幕的下半部分看到绿色的节点.预期的图形将上下移动(其中下降意味着GC已正确丢弃节点).

测试页面

这2个测试页面非常原始.当然,在现实生活中,开发人员使用生成大量文本的模板,这些模板应转换为DOM并注入页面,因此内存中的实时DOM节点数应保持较低,并且必须丢弃已删除的节点.

与jQuery - http://jsbin.com/lamigucuqogi/2/edit - 大约40秒后,GC变得疯狂并停止收集被删除的节点,这会导致通货膨胀.

朴素的方式 - http://jsbin.com/riref/2/edit - 似乎节点没有以令人满意的速度被移除,并且数量不断增长和增长...

题

为什么会发生这种情况,如何正确地删除NODES以便不会发生通货膨胀？

$.when 为同时查询的所有多个ajax调用返回Deferred对象.

如果一切都成功.done()执行,并且任何一个url .fail()执行失败.

如何处理部分成功状态？(即)如果传递5个url $.when,如果3个成功,我们需要处理成功状态,并且2失败,我们需要处理失败状态.

$.when($.getJSON(headerUrl), $.getJSON(tasksUrl), $.getJSON(testingTrackerUrl), $.getJSON(highlightsUrl)))
    .then(function(headerData, tasksData,testingTrackerData,highlightsData) {
        printData(headerData, tasksData,testingTrackerData,highlightsData);
    })
    .fail(function(data, textStatus, jqXHR) {
        console.error('Got error in '+jqXHR);
});

我有两个测试.第一次测试成功通过.然后在第二个测试中有一个url方法调用,但它不会更改浏览器中的url.

wdio.conf.js中的baseUrl设置为http://localhost/web/es/index.html#

测试:

var assert = require('assert');

describe('user login ', function(){

    it('user login', function(){

        browser
            .url('/system/login')
            .setValue('[name="username"]','test')
            .setValue('[name="password"]','test')
            .click('=Potvr?');            

        assert(browser.waitUntil('=test test'));                
    });

    it('user form', function(){

        browser
            .url('/user/form');
    });
});

在第一次测试/ system/login中正确打开.但在第二次测试中,网址永远不会更改为/ user/form

我刚开始使用webdriverio所以我错过了什么？

我想知道是否有任何非法侵入的方式可能有人知道这将允许HTML数据列表元件的作用，与contenteditable元素，不会与<input>元素。

示例代码：

<label>Choose a browser from this list:
  <span contenteditable list="browsers" name="myBrowser">choose</span> 
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

小提琴演示

似乎它只能与<input>元素绑定。在我的情况下，我有一个 javascript 插件，它隐藏了一个输入字段并将其替换为span，对于一些只能使用常规 DOM 元素完成的“特殊”事情，例如span. 这个跨度是contenteditable和行为是它替换的输入的模拟，而输入是隐藏的。

我正在使用浏览器的本机提取API来处理网络请求.此外,我正在使用whatwg-fetch polyfill用于不支持的浏览器.

但是,如果请求失败,我需要重试.现在我找到了这个npm包whatwg-fetch-retry,但他们没有解释如何在他们的文档中使用它.有人可以帮我这个或建议我另类吗？

我有一个大组件<User>和一个小组件<Task>，想给一个大组件一个按钮，然后点击它，将组件附加<Task>到<User>

用户.jsx

<div>
  <Task />
  <button onClick={`Function here to append a new Task component`}>
    New Task
  </button>
</div>

任务.jsx

<div>
  This is New task
</div>

我想在 Antd 表组件中添加另一行，所以它看起来像这样：

我无法将该行添加为一行，<tbody>因为它将与其余数据一起进行过滤和排序。我希望它成为表数据的外部部分。

将输入放在已经存在的<th>单元格中远不是一个令人满意的解决方案，因为我需要对 CSS 进行大量修改才能使其工作，并在此过程中丢失一些 LESS 变量。

这是我当前的尝试，第一个中包含表单元素thead > th

为了仅将背景保留在表单行上，我需要将其与第一个（也是唯一的）thead<tr>元素分离到它自己的“自定义”行。

有谁知道如何用 Antd 实现这个设计<Table>？

我希望最终结果如下所示：（通过检查员修改）

我正在尝试使用 React hooks 来记忆回调。此回调专门使用在对象上定义的函数。

const setValue = useCallback((value) => {
    field.setValue(key, value);
}, [field.setValue, key]);

这会触发 Eslint 规则react-hooks/exhaustive-deps。
它想让我进去[field, key]。

如果我将代码更改为以下内容，即使看起来等效，我也不会收到警告：

const { setValue: setFieldValue } = field;

const setValue = useCallback((value) => {
  setFieldValue(key, value);
}, [setFieldValue, key]);

为什么 Eslint 在第一个示例中警告我？
在这种情况下我可以安全地忽略它吗？