Vanilla Javascript текстовое поле привязки данных, как AngularJS

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.

Я пробовал вариант события «keydown» (который заботится о задержке), но похоже, что значение текстового поля не обновляется до вызова .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 за небольшую библиотеку, которая поддерживает эту функцию вне Угловое. http://rivetsjs.com

Edit: Добавлена ​​проверка поддержки событие, чтобы принять вас обратно мимо 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