jQuery не может отобразить html, который будет использоваться шаблоном Underscores

Question

Я сделал два файла, один для HTML, где скрипт определен с идентификатором id = 'search_template' и другим файлом javaScript, я упомянул «Вид».

В рендер функции зрения, я подбирая скрипт в HTML-файл с

id='search_template'

с помощью JQuery и передать его через JQuery-х

.html()

, чтобы преобразовать его в строку, а затем пропуская его до 0 Подтверждения

_.template (String)

Однако, Подчеркивание вызывает ошибку

Uncaught TypeError: Невозможно вызвать метод «заменить» нуль

Я считаю, что Jquery не может преобразовать скрипт с идентификатором = «search_template» в строке.

SearchView = Backbone.View.extend({ 
     initialize: function(){ 
     _.bindAll(this, 'render'); 
     }, 
     render: function(){ 
     var template = _.template($("#search_template").html()); 
     $("body").html(template); 
     } 
    }); 
var search_view = new SearchView({ el: $("#search_container") }); 
    search_view.render(); 

Я удалил часть JQuery из функции визуализации и попытался явным образом передавая строку HTML без использования функции .html(): -

render: function(){ 
    var template = _.template("<label><%= search_label %></label> 
    <input type=\"text\" id=\"search_input\" /> 
    <input type=\"button\" id=\"search_button\" value=\"Search\" />"); 
    $("body").html(template); 
} 

И это отлично работает. Почему это не работает, когда я использую jQuery, чтобы забрать скрипт с помощью $ ("search_template"). Также, когда я объединять файлы HTML и JavaScript, он работает. Вот фрагмент из HTML-файла: -

<script type="text/template" id="search_template"> 
<label>Search here : </label> 
<input type="text" id="search_input" /> 
<input type="button" id="search_button" value="Search" /> 
</script> 

Answer 1

Может быть, вам нужно передать объект вместе с шаблоном вызова:

var template = _.template($("#search_template").html(), { search_label: "Label1" }); 

Answer 2

Это render:

render: function(){ 
    var template = _.template($("#search_template").html()); 
    $("body").html(template); 
} 

не работает потому что у вас нет #search_template в DOM, когда он вызывается. Вот некоторые доказательства, если вы не верите мне: http://jsfiddle.net/ambiguous/HFYyx/

У вас есть опечатка или вопрос последовательности где-то:

1. Если вы не включая #search_template в HTML, а затем исправить HTML.
2. Если вы используете render до того, как #search_template находится в DOM, тогда введите render вызов в обертку $(function() { ... }), чтобы он не вызывается до тех пор, пока DOM не будет готов.
3. Если у вас есть опечатка в id, тогда исправьте свою опечатку.

Это были бы наиболее распространенные причины вашей проблемы.

---

Как и в сторону, _.template возвращает функцию (если вы также передать его второй аргумент):

template_.template(templateString, [data], [settings])

Compiles JavaScript templates into functions that can be evaluated for rendering.
[...]
If you're writing a one-off, you can pass the data object as the second parameter to template in order to render immediately instead of returning a template function.

так что вы должны быть призывающую template и использовать возвращаемое значение в HTML:

$('body').html(template()); 
// --------------------^^ 

Answer 3

Используйте это:

$(function() { 
    var search_view = new SearchView({ el: $("#search_container") }); 
    search_view.render(); 
}