backbone view и window.getSelection

Question

У меня возникли проблемы с получением window.getSelection для работы внутри представления backbone.js.

Вид отлично работает в противном случае, но всякий раз, когда я выбираю какой-либо текст, затем нажмите на кнопку тестирования, которая запускает функцию window.getSelection, выбор всегда отображается как пустой.

Я полагаю, что это может иметь какое-то отношение к моему представлению и к тому, как вид прикрепляется к странице.

Здесь пока мой тестовый код:

return Backbone.View.extend({ 

    tagName: 'div', 
    className: 'test', 
    template: _.template(tmpl, null, { }), 

    events: { 
     "click .testSelection": "testSelection" 
    }, 

    initialize: {...} 
    render: {...} 

    testSelection: function() { 
     if (window.getSelection) { 
      console.log('selection range: ', document.getSelection().toString()); 
     } 
    } 
}); 

Независимо от того, что я выбираю, я всегда получаю это в консоли:

диапазон выбор: (пустая строка)

ли есть трюк, чтобы заставить это работать внутри backbone.js?

Спасибо!

Answer 1

@adeneo является правильным. Как только вы нажмете на кнопку, вы эффективно уничтожаете диапазон выбора. Тем не менее, есть простой способ решения проблемы: сохранить исходный выбор. Просто отрегулируйте следующие свойства:

events: { 
    "mouseup": "testSelection", 
    "click .testSelection": "getSelection" 
}, 

testSelection: function() { 
    this.currentSelection = window.getSelection(); 
}, 

getSelection: function() { 
    console.log(this.currentSelection.toString()); 
} 

Ключ здесь для сохранения выбора. Вы можете делать все, что захотите, с ним позже (например, отображать его в консоли на клике <button>).

Примечание что я установил наш взгляд слушать mouseupвезде в представлении. Если есть только <element> (или диапазон элементов, как и все <p> в представлении), которые вам интересны, я бы использовал этот элемент.

Вы также можете проверить работу fiddle. (Кредит @nikoshr для обеспечения базовой скрипки)