Avalon 的 ms-duplex 的问题

转：https://segmentfault.com/a/1190000005362826

前端框架 Avalon 有一个问题，即 在使用 ms-duplex 后，此 input 在 Windows 8.1 的 IE11 下无法正常使用输入法输入中文，这个问题在 Avalon 1.5.X 中一直存在且被复现。

既然无法直接修复，那么就使用 avalon.directive 自定义一个新的指令来简单地处理双向数据绑定。起名为 ms-model，名字来源于 Angular.

avalon.directive("model", {
    init: function (binding) {
        // binding 为指令初始化时注入对象.
        init(binding)();
    },

    // 此方法类似 Get / Set, 在控制器使用 $watch 监视 (binding.expr, 即 ms-model="expr") 时触发, 可在此做一些杂七杂八的事情.
    update: function (newVal, oldVal) {
        // this 为 init 中的 bingding 对象.
        this.element.value = newVal;
    }
});


// Definition: ms-model.
function init (binding) {

    var thisElement = binding.element;  // 指令所在的节点.
    var directiveValue = binding.expr;  // 指令绑定的属性.
    var imeIgnored = false;  // 输入法忽略控制标识.

    // 初始化赋值. 必须推入任务队列才生效.
    setTimeout(function () {
        thisElement.value = binding.oldValue !== undefined ? binding.oldValue : "";  // 未赋值进行清空, 防止 IE / Edge 缓存.
    }, 1);

    // Definition: Input 事件.
    var inputEvent = function (event) {
        if (imeIgnored) { return; }
        // vmodels 是指令所在的控制器的数组, 看起来是按照 [孙, 子, 父] 的冒泡顺序排序, 但未肯定.
        // ms-duplex 只处理了指令所在的最近的控制器的数值, 在此也只处理 vmodels[0].
        eval('binding.vmodels[0].' + directiveValue + ' = thisElement.value;');   // 使用 eval 解决多层嵌套问题.
    };


    return function () {
        // 在使用输入法的时候不进行数据同步.
        // 进入输入法状态时锁定控制标识.
        avalon.bind(thisElement, "compositionstart", function () {
            imeIgnored = true;
        });

        // 输入法恢复时释放控制标识.
        avalon.bind(thisElement, "compositionend", function () {
            imeIgnored = false;
            inputEvent();  // Fixing for Edge, Edge 的日语输入法的 input 事件在 compositionend 之前执行, 而其他浏览器包括 IE11 全是 compositionend 之后, 需要手动触发一次.
        });

        // 设置 Input 事件.
        avalon.bind(thisElement, "input", inputEvent, false);

        // 修复 IE 问题.
        if (window.ScriptEngine && window.ScriptEngine()) {

            // 修复 IE9 的 Backspace / Delete 剪切不触发 Input 事件的问题.
            if (navigator.appVersion.indexOf("MSIE 9.0") > -1) {
                avalon.bind(thisElement, "cut", function () {
                    setTimeout(inputEvent, 1);  // 必须推入任务队列中执行才生效.
                });
            }

            // IE 额外注册 KeyUp 进行数据绑定来避免输入法无效的问题.
            avalon.bind(thisElement, "keyup", function (event) {
                event = event || window.event;
                if (event.keyCode === 17 || event.keyCode === 18 || event.ctrlKey || event.shiftKey || event.altKey) { return; }
                inputEvent();
            });

        }
    }
}