Javascript 每次按下按钮时，清除视图并重新启动-backbone.js

每次我按下按钮，它就会添加数据并重新加载页面，列表就会消失。默认设置有效，但每次单击按钮时，它都会不断添加到列表中

如何清除列表并在每次单击按钮时重新启动

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);
        }



    }
});

model=新主干网。model({
数据：[
{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({
初始化：函数（）{
//log（'初始化'+this.options.blankOption）；
this.template=$（“#列表模板”）.children（）；
},
el:'集装箱'，
活动：{
“单击按钮”：“渲染”
},
//模型：模型，
渲染：函数（事件）{
//event.preventDefault（）；
var data=this.model.get（'data'）；
对于（变量i=0；i

原因是每次单击按钮时，整个视图都会再次呈现并附加到现有内容中。这将解决您的问题：

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

---

您应该尝试的另一件事是，您可以创建一个名为“Links”的集合和一个名为“Link”的模型，而不是创建一个包含大量对象的数据属性的模型。要显示模型，可以在渲染调用中将集合传递给视图和：

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

}))

当您调用

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=links的列表，我们可以在其中附加模型。我们现在要做的就是在LinkView中创建一个

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

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

---

希望这有帮助

谢谢你能给我举个例子吗？我还在努力学习这个框架。我最后的答案还有一点。检查它是否是你所需要的。

var ls = new Links()

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}})

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

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