Question

我试图复制AngularJS website上的双向数据绑定示例。

这是我的代码（用简洁的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网站上。

我已经尝试了一个＆＃39; keydown＆＃39;事件变化（负责延迟），但看起来文本框值在.val()调用之前未更新（因此我总是只有一键按下）。

如何使用keyup，keydown或任何其他方法实现快速查看更新？

Answer 1

绑定input以获得即时同步。 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（如果您关心此类事情。）

Answer 2

我没有看到那么多延迟，但是如果你缓存jquery对象可能会有所帮助（DOM越大，这将有助于）：

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

    //add it to the view
    $view.html(text_box_str);
});

https://jsbin.com/ruxajowolo/edit?html,js,output

Vanilla Javascript文本框数据绑定，如AngularJS

2 个答案: