資訊專欄INFORMATION COLUMN
摘要：前端框架有一個問題，即在使用后，此在的下無法正常使用輸入法輸入中文，這個問題在中一直存在且被復現(xiàn)。既然無法直接修復，那么就使用自定義一個新的指令來簡單地處理雙向數(shù)據(jù)綁定。
前端框架 Avalon 有一個問題，即 在使用 ms-duplex 后，此 input 在 Windows 8.1 的 IE11 下無法正常使用輸入法輸入中文，這個問題在 Avalon 1.5.X 中一直存在且被復現(xiàn)。
既然無法直接修復，那么就使用 avalon.directive 自定義一個新的指令來簡單地處理雙向數(shù)據(jù)綁定。起名為 ms-model，名字來源于 Angular.
實現(xiàn)如下：
avalon.directive("model", {
init: function (binding) {
// binding 為指令初始化時注入對象.
init(binding)();
},
// 此方法類似 Get / Set, 在控制器使用 $watch 監(jiān)視 (binding.expr, 即 ms-model="expr") 時觸發(fā), 可在此做一些雜七雜八的事情.
update: function (newVal, oldVal) {
// this 為 init 中的 bingding 對象.
this.element.value = newVal;
}
});
// Definition: ms-model.
function init (binding) {
var thisElement = binding.element; // 指令所在的節(jié)點.
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 是指令所在的控制器的數(shù)組, 看起來是按照 [孫, 子, 父] 的冒泡順序排序, 但未肯定.
// ms-duplex 只處理了指令所在的最近的控制器的數(shù)值, 在此也只處理 vmodels[0].
eval("binding.vmodels[0]." + directiveValue + " = thisElement.value;"); // 使用 eval 解決多層嵌套問題.
};
return function () {
// 在使用輸入法的時候不進行數(shù)據(jù)同步.
// 進入輸入法狀態(tài)時鎖定控制標識.
avalon.bind(thisElement, "compositionstart", function () {
imeIgnored = true;
});
// 輸入法恢復時釋放控制標識.
avalon.bind(thisElement, "compositionend", function () {
imeIgnored = false;
inputEvent(); // Fixing for Edge, Edge 的日語輸入法的 input 事件在 compositionend 之前執(zhí)行, 而其他瀏覽器包括 IE11 全是 compositionend 之后, 需要手動觸發(fā)一次.
});
// 設(shè)置 Input 事件.
avalon.bind(thisElement, "input", inputEvent, false);
// 修復 IE 問題.
if (window.ScriptEngine && window.ScriptEngine()) {
// 修復 IE9 的 Backspace / Delete 剪切不觸發(fā) Input 事件的問題.
if (navigator.appVersion.indexOf("MSIE 9.0") > -1) {
avalon.bind(thisElement, "cut", function () {
setTimeout(inputEvent, 1); // 必須推入任務隊列中執(zhí)行才生效.
});
}
// IE 額外注冊 KeyUp 進行數(shù)據(jù)綁定來避免輸入法無效的問題.
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();
});
}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79593.html
摘要：相關(guān)組件版本最近，在公司的項目中，要開發(fā)一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結(jié)果很令人沮喪，依然沒有控制節(jié)點的位置，所以應該不是這個問題。 相關(guān)組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發(fā)一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺...
摘要：也是一個版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用重新編寫了。之前使用風格的編寫，進行合并。很好的解決這問題。隨著對的大膽嘗試的成功，以后源碼也計劃隨遷移。不過，大家放心，最后出來的框架還是形式，能運行于下。 avalon2.1.16也是一個Fix BUG版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用es6 modules重新編寫了。之前使用nodejs風格的Commo...
摘要：最近因項目進展需求對現(xiàn)有項目進行重構(gòu)，由于目前項目還未實現(xiàn)真正意義上的前后端分離后續(xù)會循序重構(gòu)實現(xiàn)，在時間緊產(chǎn)品循序迭代的情況下，想一次性實現(xiàn)前后端分離精力實在有限主要是前端開發(fā)人力不足。 最近因項目進展需求對現(xiàn)有項目進行重構(gòu)，由于目前項目還未實現(xiàn)真正意義上的前后端分離（后續(xù)會循序重構(gòu)實現(xiàn)），在時間緊產(chǎn)品循序迭代的情況下，想一次性實現(xiàn)前后端分離精力實在有限（主要是前端開發(fā)人力不足）。所...
摘要：現(xiàn)在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構(gòu)建一個單頁面程序介紹以下，是對自己的一個總結(jié)，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。 這篇文章是寫在公司項目結(jié)束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...
閱讀 3079·2021-11-22 09:34
閱讀 3675·2021-08-31 09:45
閱讀 3898·2019-08-30 13:57
閱讀 1704·2019-08-29 15:11
閱讀 1708·2019-08-28 18:04
閱讀 3253·2019-08-28 17:59
閱讀 1594·2019-08-26 13:35
閱讀 2215·2019-08-26 10:12
