javascript - Vanilla Javascript 文本框数据绑定(bind)，如 AngularJS

Question

我正在尝试在 AngularJS website 上复制双向数据绑定(bind)示例.

这是我的代码(为简洁起见用 JQuery 的说法):

$('#model-textbox').on('keyup', function(){
    //get value of text box
    var text_box_str = $(this).val();

    //add it to the view
    $('#view-div').html(text_box_str);
});

它按预期工作，但从释放键到显示文本似乎有某种延迟。这种延迟不会发生在 AngularJS 网站示例中。

我已经尝试了 'keydown' 事件变体(它处理延迟)，但看起来文本框值在 .val() 调用之前没有更新(所以我始终在后面按一个键)。

如何使用 keyup、keydown 或任何其他方法实现快速 View 更新？

Answer 1

绑定(bind)输入以获得即时同步。 https://developer.mozilla.org/en-US/docs/Web/Events/input

var $view = $('#view-div');
var ie9 = navigator.appVersion.indexOf("MSIE 9.")!=-1;
var event = ('oninput' in document.documentElement && !ie9) && 'input' || 'keypress';

$('#model-textbox').on(event, function(){
    var $el = $(this);
    if(event === 'keypress') {
      setTimeout(function(){ $view.text($el.val()); },0);
    } else {
      $view.text($el.val());
    }
});

此外，请查看 RivetsJS 以获取在 Angular 之外支持此功能的小型库。 http://rivetsjs.com

编辑:添加了事件支持检查，让您回到过去的 IE9(如果您关心这些事情。)