每次按下按鈕清除視圖並重新開始 - backbone.js

每當我按下按鈕，它會添加我的數據並重新加載頁面，列表消失。預防默認工作，但每次我點擊它不斷添加到列表中的按鈕。每次按下按鈕清除視圖並重新開始 - backbone.js

如何清除列表並重新開始每個按鈕點擊？每次單擊該按鈕時

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script> 
    <script type="text/javascript" src="Scripts/underscore.js"></script> 
    <script type="text/javascript" src="Scripts/backbone.js"></script> 

</head> 
<body> 

    <div> 

     <div id="container"> 
      <button>Load</button> 
      <ul id="list"></ul> 
     </div> 

     <div id="list-template"> 
      <li><a href=""></a></li> 
     </div> 


     <script type="text/javascript" src="JavaScript.js"></script> 


    </div> 

</body> 
</html>

的JavaScript

model = new Backbone.Model({ 

    data: [ 

     { text: "site 1", href: "link1.htm" }, 
     { text: "site 2", href: "link2.htm" }, 
     { text: "site 3", href: "link3.htm" }, 
     { text: "site 4", href: "link4.htm" }, 
     { text: "site 4", href: "link4.htm" }, 
     { text: "site 4", href: "link4.htm" }, 
     { text: "site 4", href: "link4.htm" }, 

    ] 
}); 

var View = Backbone.View.extend({ 

    initialize: function() { 
     //console.log('initializing ' + this.options.blankOption); 
     this.template = $('#list-template').children(); 
    }, 
    el: '#container', 
    events: { 
     'click button' : 'render' 
    }, 
    //model:model, 
    render: function(event){ 
     //event.preventDefault(); 
     var data = this.model.get('data'); 
     for (var i = 0; i < data.length; i++) { 
      var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end(); 
      this.$el.find('ul').append(li); 
     } 



    } 
});

來源

2013-02-25 Hello-World

請張貼HTML太.. – PSR 2013-02-25 10:05:15

非常感謝 – 2013-02-25 10:09:18

的原因是，整個視圖再次渲染並追加到現有的內容。這將解決您的問題：

// empty the content inside the $el and re-rendering. 
this.$el.empty(); 
this.$el.find('ul').append(li);

來源

2013-02-25 10:10:51 yuwang

你應該嘗試的另一件事情是不是創建一個模型與數據屬性全對象，你可以創建一個名爲類似「鏈接」和所謂的「鏈接」的模式徵收。通過創建另一種觀點認爲只是爲了顯示模型與它的「變量名」屬性設置爲「李」

this.collection.each(function(model){$el.find('ul').append('<li><a href="' + model.get("href") + '">' + model.get('text') + '</a></li>')})

可以改善這一點：要顯示的模型，你可以收集傳遞給視圖，並在渲染調用。

例如，在這裏我將創建一個模型和一個集合來容納模型。然後，我將創建2個視圖來保存集合，另一個顯示模型。

var Link = Backbone.Model.extend({}) 
var Links = Backbone.Collection.extend({ 
    model: Link 
    url: '/links'

}）;

var ls = new Links()

當你調用一個ls.fetch()通話將您的服務器應該與所有的鏈接JSON對象回答進行。骨幹將小心實例化本身內的鏈接模型。你可以通過做ls.length來檢查它是否工作，它應該返回一個大於零的值。

然後，你可以創建這樣一個觀點：

var MainView = Backbone.View.extend({ 
    template: JST['teams/index'] 

    render: function(){ 
     $(this.el).html(this.template()) 
     this.collection.each(this.appendLink()) 
     this}, 
    appendTeam: function(model){ 
    view = new LinkView({model: model}) 
    $('#links').append(view.render().el) 
    this}})

的模板函數應該有蒙山ID =鏈接，我們可以添加我們的模型的列表。我們現在要做的就是創建一個LinkView

var LinkView = Backbone.View.extend({ 
    template: JST['teams/team'], 
    tagName: 'li', 

    render: function(){ 
    $(this.el).html(this.template({model: this.model})); 
    this}})

希望這有助於！

來源

2013-02-26 03:14:51 guzmonne

謝謝你能給我一個例子 - 我仍然試圖學習這個框架。 – 2013-02-26 06:29:48

我對我的最後一個答案有一點點。檢查它是否是你需要的。 – guzmonne 2013-02-26 10:02:26

非常感謝 – 2013-02-26 13:38:55

每次按下按鈕清除視圖並重新開始 - backbone.js

回答

相關問題