如何呈現內聯的Backbone視圖？

我有一點遺留的HTML，通過AJAX返回一個項目列表。如何呈現內聯的Backbone視圖？

var xhr = $.get('/example'); 
xhr.done(function(data){ 
    $('#container').html(data); 
});

我重構了一段HTML以使用Backbone視圖。我想立即渲染視圖，內聯，而不指定選擇器。下面是HTML的一個簡單的例子：

<ul> 
    <li> 
    Some stuff here 
    <script> 
     var view = new MyView(); 
     // render the view and put the html right here! 
    </script> 
    </li> 
</ul>

我想是這樣document.write(view.render().el)但沒有正常工作。

如何渲染內聯視圖？

更新：這個問題的原因是會有多個列表項目，這個視圖將被多次呈現。我不認爲有必要爲每個列表項目創建一個唯一的ID，只是爲了將Backbone視圖添加到每個列表項目。我想也許有一種簡單的方法可以在腳本標籤中說出「這個父母」。也許這是我真正的問題...

來源

2014-11-24 Andrew

我拿會一直'document.write'。當你嘗試時會發生什麼。 – 2014-11-24 19:57:23

但一個視圖與DOM節點，而不是一個文本/ HTML的大塊。文本的混蛋沒有事件或其他任何東西。我認爲你需要不斷重構。 – 2014-11-24 20:14:30

render函數應該將視圖渲染到它的$el屬性。

渲染後，您可以訪問$el以獲取渲染視圖。你可以把它寫「內聯」是這樣的：

<ul> 
    <li> 
    Some stuff here 
    <script> 
     var view = MyView(); 
     view.render(); 
     document.write(view.$el.html()); 
    </script> 
    </li> 
</ul>

一個完整的例子：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></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"> 
    SearchView = Backbone.View.extend({ 
     render: function() { 
      var template = _.template($("#search_template").html(), {}); 
      this.$el.html(template); 
     } 
    }); 

    var search_view = new SearchView(); 
    search_view.render(); 
    document.write(search_view.$el.html()); 
</script>

請注意，這不是骨幹路是爲了使用。這種內聯不適用於事件。

正確的方法是將適當的元素傳遞給視圖的構造函數。或者，您可以將該元素作爲另一個孩子附加以保持全部功能：

document.getElementById('foo').appendChild(myView.$el);

來源

2014-11-24 20:14:37

很確定'view。$ el.html（）'和'view.el'基本相同......我錯了嗎？ – Andrew 2014-11-24 20:18:25

編號'el'是元素，'$ el'是jQuery包裝的元素。請參閱http://stackoverflow.com/questions/10640289/backbone-js-whats-the-difference-between-el-and-el – 2014-11-24 20:21:39

對。 'el'是原始的JavaScript DOM元素，它仍然包含事件。我想我的錯誤是認爲'document.write'會接受一個JavaScript DOM元素，但是隻接受HTML作爲一個字符串。 – Andrew 2014-11-24 20:32:07

嘗試類似這樣的操作。

<ul> 
    <li> 
    Some stuff here 
    <script id="use_an_id_for_safety"> 
     // I assume you instantiate correctly, but I explicitly use new here 
     var view = new MyView({el: $(document.currentScript)});// or use the id 
     view.render(); 
     // render the view and put the html right here! 
    </script> 
    </li> 
</ul>

Here的小提琴與解決方案

來源

2014-11-24 20:21:34 cdanea

如何呈現內聯的Backbone視圖？

回答

相關問題