2012-05-15 8 views
0

Я использую backbone.js, underscore.js и jQuery. Я взял следующий пример кода из http://jsfiddle.net/thomas/C9wew/6/:backbone.js/underscore.js innerHTML вместо html()

<!DOCTYPE html> 
<html> 
    <head> 
     <title>backbone.js</title> 
    </head> 
    <body> 
     <div id="search_container"> 
      Container 
     </div> 

     <script src="/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> 
     <script src="/js/underscore-min.js" type="text/javascript" charset="utf-8"></script> 
     <script src="/js/backbone-min.js" type="text/javascript" charset="utf-8"></script> 

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

     <script type='text/javascript'> 
      //<![CDATA[ 
      $(window).load(function() { 

       SearchView = Backbone.View.extend({ 
        initialize : function() { 
         this.render(); 
        }, 
        render : function() { 
         // Compile the template using underscore 
         var template = _.template($("#search_template").html(), {}); 
         // Load the compiled HTML into the Backbone "el" 
         //this.el.html(template); 
         this.el.innerHTML = template; 
        }, 
        events : { 
         "click input[type=button]" : "doSearch" 
        }, 
        doSearch : function(event) { 
         // Button clicked, you can access the element that was clicked with event.currentTarget 
         alert("Search for " + $("#search_input").val()); 
        } 
       }); 

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

      }); 
      //]]> 

     </script> 
    </body> 
</html> 

Я ожидаю, что «Эль», чтобы быть обернуты JQuery элемент, потому что выбран через JQuery селектор $ («# search_container»), однако это не потому, что он не имеет такой функции, как html().

Если я поставил точку останова в строке «el: $ (« # search_container »)», элемент «el» имеет функцию html(), которая является нормальным поведением. Когда вызывается функция рендеринга, элемент «el» больше не имеет функции html().

ответ

1

Приведенный вами пример основан на старой версии магистрали (0.3.3). Ваша выборка, вероятно, использует последнюю версию (0.9.2), где this.el является элементом DOM, а this.$el является кешированным элементом jQuery | Zepto, связанным с this.el.

Это означает, что если вы хотите использовать метод html, используйте this.$el.html(template). Проверьте этот пример Fiddle http://jsfiddle.net/gFcRR/1/ для обновленного примера.

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