Загрузка содержимого jquery в тег скрипта в firefox

У меня есть html-страница с использованием jquery 1.7.2. Внутри страницы у меня есть тэг для скриптов.Загрузка содержимого jquery в тег скрипта в firefox

<script id="navigation-template" type="text/x-handlebars-template"></script>

Далее вниз страницы я использую JavaScript, чтобы загрузить мои рули шаблона в тег сценария с помощью следующей функции:

loadTemplate: function(templateId, elementId) { 
    if (!elementId) { 
     elementId = templateId; 
    } 
    $('#'+elementId).load('/my/path/templates.html #'+templateId); 
    }

Это работает отлично в хроме, затмение браузера, и даже IE 9, но, похоже, идет на юг в Firefox.

Я отлаживал, и вызов загрузки успешно завершается, и содержимое возвращается, но вызов $('#navigation-template').html() дает пустую строку.

У меня также был контент в теге скрипта и вызвал загрузку и увидел, что он был заменен пустой строкой после вызова .load.

Наконец, если я вручную выполнил $('#navigation-template').html("hello");, я вижу, что значение .html() для тега скрипта изменено.

Если я перейду к простому ajax get, тогда мне придется разобрать его и получить данный элемент, а не полагаться на нагрузку, чтобы получить элемент для меня.

Как обойти эту проблему в firefox?

источник

2013-08-20 digitaljoel

Почему вы должны поместить его в тег сценария, вы не можете просто составить шаблон, как только вы его получите от ajax (load)? – dezman

Hrm. Я посмотрю на это. Хорошая вещь о том, чтобы поместить его в тег скрипта, это то, что я могу просто использовать функцию 'load()', и все это сделано, тогда, когда я хочу применить шаблон позже, я могу. Чтобы скомпилировать его сейчас, мне придется загрузить его по-другому (поставьте обработчик успеха для загрузки и обработки его вручную), но это может быть ответ ... – digitaljoel

@Watson благодарит за то, что указал на очевидное решение. Иногда я только javascript, поэтому иногда мне это нужно. Поместите свой комментарий в качестве ответа, и я приму его. – digitaljoel

Здесь функции я использую для таких целей:

Util.loadTemplates = function(ExternalTemplates) { 
    $.each(ExternalTemplates, function(index, value){ 
     var scriptUrl = value; 
     $.ajax({ 
      url: scriptUrl, 
      dataType: 'text', 
      success: function(res){ 
       var templateName = value.slice(value.lastIndexOf('/') + 1, value.lastIndexOf('.')); 
       TEMPLATES[templateName] = Handlebars.compile(res); 
      } 
     }); 
    }); 
} 

var ExternalTemplates = [ 
    'templates/application.hbs', 
    'templates/people.hbs' 
];

Но это лучше посмотреть на выполнение компиляции, которая превращает шаблон в функцию, прежде чем страница будет отправлена клиенту.

источник

2013-08-26 23:02:20 dezman

Спасибо. Я пришел к аналогичному решению. Я отправлю свое решение, но я все равно соглашусь с вашим ответом, поскольку он указал мне в правильном направлении. – digitaljoel

Вы используете тип, как это

<script id="navigation-template" type="text/x-handlebars-template"></script>

Попробуйте изменить тип на

<script id="navigation-template" type="text/javascript"></script>

источник

2013-08-20 04:54:39

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

Единственное, что мне понравилось в load(), состояло в том, что я мог хранить все мои шаблоны в одном файле и использовать нагрузку, чтобы выбрать div для интересующего меня шаблона. Я написал метод, который будет загружать файл шаблона и хранить шаблонов в карту имени шаблона для источника шаблона и скомпилированного шаблона. Я скомпилирую шаблон при первом доступе, чтобы каждый раз без необходимости составлять все шаблоны, а только компилировать те, которые мне нужны, когда это необходимо. Это выглядит примерно так:

var myTemplateHelperThingy = { 
    loadTemplates: function() { 
    $.get('/my/path/templates.html') 
     .done(function(data) { 
     var elements = $(data); 
     $('div.template-marker-class', elements).each(function(index, element) { 
      // need to use element instead of 'this' because IE is st00pid. 
      var content = $(element)[0].outerHTML; // trick from StackOverflow 
      myAppObject.pageTemplates[this.id] = { 
      source: content, 
      template: null 
      }; 
     }); 
    }); 
    }, 
    getTemplate: function(name) { 
    // get a compiled template, compiling it if necessary. 
    var result = myAppObject.pageTemplates[name].template; 
    if (!result) { 
     myAppObject.pageTemplates[name].template = Handlebars.compile(myAppObject.pageTemplates[name].source); 
    } 
    return myAppObject.pageTemplates[name].template; 
    }, 
    evalTemplate: function(data, templateName) { 
    var template = myAppObject.getTemplate(templateName); 
    if (template) { 
     return template(data); 
    } 
    else { 
     // message to user here that something went wrong. 
    } 
    }, 
    showTemplate: function(targetElement, data, templateName) { 
    $(targetElement).html(bi.evalTemplate(data, templateName)); 
    } 
}

И templates.html выглядит следующим образом:

<html> 
<body> 
<div id="templates-wrapper-do-not-remove-or-jquery-will-not-find-the-templates"> 
    <div id="my-first-template" class="template-marker-class other-class"> 
    <!-- a bunch of content --> 
    </div> 
    <div id="my-second-template" class="template-marker-class another-class"> 
    <!-- more content --> 
    </div> 
</div> 
</body> 
</html>

источник

2013-08-27 03:27:34 digitaljoel

Загрузка содержимого jquery в тег скрипта в firefox

ответ

Смежные вопросы