Лучший способ добавить элементы бутстрапа в HTML?

Question

В настоящее время у меня есть некоторый код, который заполнит предупреждение, который заканчивается тем, что это:

$('#alertContainer').html('<div class="alert alert-info alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Warning!</strong> No valid nodes were found for the path object.</div>'); 

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

Итак, есть ли лучший, более чистый способ сделать это?

Answer 1

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

метод

Функция:

function warningCodeCustom(noun) { 
    var string = '<div class="alert alert-info alert-dismissible" role="alert">'; 
    string += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'; 
    string += '<strong>Warning!</strong> No valid ' + noun + ' were found for the path object.'; 
    string += '</div>'; 
    return string; 
    } 

Вызывается: $('#alertContainer').html(warningCodeCustom('node'));

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

window.MyError = window.MyError || {}; 

MyError.Toolbox = MyError.Toolbox || { 
    self : this, 
    init : function() { 
    //trigger the warning code bind 
    self.warningCodeBind(); 
    }, 
    warningCodeBind : function() { 
    //if there are no items on the page add content to our alert container 
    if(!jQuery('.validNodes, .orOtherNodes').length) { 
     jQuery('#alertContainer').html(self.warningCodeCustom()); 
    } 
    }, 
    warningCodeCustom : function(noun) { 
     var string = '<div class="alert alert-info alert-dismissible" role="alert">'; 
     string += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'; 
     string += '<strong>Warning!</strong> No valid ' + noun + ' were found for the path object.'; 
     string += '</div>'; 
     return string; 
     } 
}; 

jQuery(window).load(function() { 
    MyError.Toolbox.init(); 
}); 

Я не уверен, что еще делает ваш код, но .error() функциональность может быть полезным. Article here