Переменная область вызова функции из HTML

Question

Я пытаюсь понять, как вызов метода объекта из HTML без объявления этого объекта глобальной переменной. Возможно ли это? Я действительно не хочу загрязнять глобальный масштаб, поэтому я предполагаю, что должен быть способ избежать этого ...

Предположим, у меня есть объект javascript, который один из его методов называется clearSelection(). Этот метод clearSelection() просто стирает значение текста ввода html и делает некоторые другие вещи, которые вообще не имеют отношения к этому вопросу.

Проблема заключается в том, что когда я объявляю этот объект внутри $(function(){}); в качестве локальной переменной для этой функции, я не могу получить к нему доступ из атрибута html ввода, поскольку он не определен.

Мое решение для этого было бы объявить этот объект в качестве глобальной переменной, может быть, не прямо внутри window объекта, но что-то менее вредным, как внутри window.document.body (я считаю, что это хуже, пусть он будет объявлен непосредственно внутри объекта окна, так что я думаю, это все равно плохо ...)

Вот код для вас:

Мой объект:

function MyObject(foo,bar){ 
    ... 
    ... 
    this.clearSelection() = function(){ 
     // do some useful stuff here 
     ... 
    } 
} 

теги сценария внутри моей HTML:

<script> 
$(function(){ 
    var myObject = new MyObject(baz,bal); 
}); 
</script> 

Моя кнопка declatarion @ HTML:

<button type="button" onclick="myObject.clearSelection()">Clear</button> 

Так, JavaScript консоль жалуется, потому что myObject не определен, и я предполагаю, что это из-за объема, потому что из HTML я не могу получить доступ к той же области, в которой находится объект (myObject).

---

Текущий подход

Вот как я это делаю, так что это работает, но мне это не очень нравится, и я прошу еще более чистого способа. Структура объекта и HTML button одинаковы, так что я буду показывать эти:

<script> 
$(function(){ 
    window.document.body.myObject = new MyObject(baz,bal); 
}); 
</script> 

Answer 1

Вы должны использовать .on() и связать обработчик событий с помощью JQuery и избавиться от уродливых обработчика рядный щелчка.

Добавить ID свойство button элемент и использовать ID Selector (“#id”)

$(function(){ 
    var myObject = new MyObject(baz,bal); 
    $('#clearSelection').on('click', function(){ 
     myObject.clearSelection(); 
    }) 
}); 

HTML

<button type="button" id="clearSelection">Clear</button>