Сгенерированные функции

Question

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

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

<script id="buttonScripts"> 
twitchStatus('player1'); 
twitchStatus('player2'); 
twitchStatus('player3'); 

function twitchStatus(twitchName){ 
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData){ 
    if (streamData.stream == null){ 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/toffline.png"></button>'); 
     $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}'); 
    } else { 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/tonline.png"></button>'); 
     $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}'); 
     } 
    }) 
}; 
</script> 

Скрипт генерирует кнопки и функции, если он обнаружит их или в автономном режиме, но использует другой формат PNG, чтобы показать статус. Сама функция изменяет объект внедрения, чтобы заменить URL-адрес потока выбранным URL-адресом стримеров, и он отлично работает, когда он не генерируется с помощью этой функции.

Сгенерированные функции добавляются к нижней части скрипта, поэтому они живут в одном наборе тегов скриптов. Есть ли что-то, чего я не вижу, что помешало бы им быть доступным для звонка onclick с кнопок?

Answer 1

Было бы лучше включить функцию на странице по умолчанию, а затем передать имя в качестве параметра. Есть много способов сделать это, но это подход, я бы ...

function twitchStatus(twitchName) { 
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) { 

     var $button = $("<button/>", { 
      "class": "btn btn-fill btn-round", 
      "data-twitchname": twitchName, 
      "text": twitchName + "'s Stream", 
      "type": "button" 
     }); 

     if (streamData.stream == null) { 
      var $img = $("<img/>", { "src": "images/toffline.png" }); 
      $button.append($img); 
     } 
     else { 
      var $img = $("<img/>", { "src": "images/tonline.png" }); 
      $button.append($img); 
     } 

     $button.on("click", function() { 
      onButtonClick($(this).data("twitchname")); 
     }); 

     $(twitchButtons).append($button); 
    }) 
}; 

function onButtonClick(twitchName) { 
    var StreamObject = document.getElementById("live_embed_player_flash"); 
    if (StreamObject != null) { 
     StreamObject.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + twitchName + ");}}"); 
    } 
} 

Answer 2

Динамически добавление контента в тег сценария не большой шаблон, чтобы следовать - и, вероятно, не работает во всех браузерах ,

Лучшим решением является использование одного делегированного обработчика событий на ваших элементах button, который использует атрибуты data для изменения его поведения для каждой кнопки. Что-то вроде этого:

function twitchStatus(twitchName) { 
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) { 
     var image = streamData.stream == null ? 'toffline' ? 'tonline'; 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" data-name="' + twitchName + '">' + twitchName + '\'s Stream<img src="images/' + image + '.png"></button>'); 
    }) 
}; 

$(twitchButtons).on('click', '.btn', function(e) { 
    e.preventDefault(); 
    $("#live_embed_player_flash").attr('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + $(this).data('name')); 
})