Javascript 如何使用按钮从json填充主干集合

我有大量的json对象集合，我通过搜索函数检索这些对象，尽管这取决于搜索字符串，但输出可以多达数千个数组，我将这些数组填充到一个列表中。在移动环境中，一旦我向每个对象添加touchmove、touchstart和touchend，这将成为一个麻烦和内存消耗。我找到了解决这个问题的方法，即使用backbone.js和button之类的触发器来显示对象，这可以变得非常健壮。虽然我不知道该怎么做。这是一个没有按钮的工作示例。我该怎么做

<script>
    //model - define value objects.
    var Client = Backbone.Model.extend({
        defaults: {
            name: 'cole',
            age: '12'
        }
    });
    //collection - load json
    var ClientCollection = Backbone.Collection.extend({
        defaults: {
            model: Client
        },
        model: Client,
        url: './json/test.json',
    //override parse due to json format. point to "items"
        parse: function (response, xhr) {
            return response.items;
        }
    });
    //view. init collection. listen for data to be loaded. render.
    var ClientView = Backbone.View.extend({
        initialize: function () {
            this.collection = new ClientCollection();
            this.collection.bind("reset", this.render, this);
            this.collection.fetch();
        },
        render: function () {
            //append to html here ...
            //alert(this.collection.at(0).get("name"));
            //alert(this.collection.length)
            for (var i = 0; i < this.collection.length; i++) {
                $('#append-el').append('<li>' + this.collection.at([i]).get("name") + '; ' + this.collection.at([i]).get("age") + '</li>')
            }

        }
    });
    var clientView = new ClientView();

</script>

<div id = "append-el"></div>

//模型-定义值对象。
var Client=Backbone.Model.extend({
默认值：{
名字：'科尔'，
年龄：'12'
}
});
//集合-加载json
var ClientCollection=Backbone.Collection.extend({
默认值：{
型号：客户端
},
型号：客户机，
url:“./json/test.json”，
//由于json格式，重写解析。指向“项”
解析：函数（响应，xhr）{
返回响应项目；
}
});
//视图。初始化集合。侦听要加载的数据。提供。
var ClientView=Backbone.View.extend({
初始化：函数（）{
this.collection=new ClientCollection（）；
this.collection.bind（“reset”，this.render，this）；
this.collection.fetch（）；
},
渲染：函数（）{
//在这里附加到html。。。
//警报（此.collection.at（0.get（“name”））；
//警报（this.collection.length）
for（var i=0；i”+this.collection.at（[i]）.get（“name”）+”；“+this.collection.at（[i]）.get（“age”）+”'））
}
}
});
var clientView=new clientView（）；

如果我能很好地理解你，那么这应该是可行的：

var ClientView = Backbone.View.extend({
    el: '#append-el',
    events: {
        'click button': 'onButtonClick'
    },
    initialize: function() {
        _.bindAll(this);
        this.collection = new ClientCollection();
        this.collection.bind("reset", this.renderClients);
        this.render();
    },
    render: function() {
        //append to html here ...   
        this.$el.append('<button type="button">Fetch clients</button><ul class="clients"></ul>');
    },
    renderClients: function() {
        var $ul = this.$('ul.clients').empty();
        this.collection.each(function(client) {
            $ul.append('<li>' + client.get("name") + '; ' + client.get("age") + '</li>');
        });
    },
    onButtonClick: function(e) {
        this.collection.fetch();
    }
});

var ClientView=Backbone.View.extend({
el:“#追加el”，
活动：{
“单击按钮”：“onButtonClick”
},
初始化：函数（）{
_.bindAll（这个）；
this.collection=new ClientCollection（）；
this.collection.bind（“重置”，this.renderClients）；
这个。render（）；
},
render:function（）{
//在这里附加到html。。。
这个.el.append（'fetchclients
）；
},
renderClients:function（）{
var$ul=this.$（'ul.clients'）.empty（）；
此.collection.each（函数（客户端）{
$ul.append（“
”+client.get（“name”）+；“+client.get（“age”）+”
”）；
});
},
onButtonClick：函数（e）{
this.collection.fetch（）；
}
});

在视图中添加一个事件侦听器，指向带有事件哈希的按钮，类似下面这样

，事件{
“单击按钮”：“fillCollection”//我建议不要一次提取数千个项目。将其限制为100个，最多200个。然后我会开始听滚动列表，根据需要提取其余项目（一旦用户接近滚动区域的末端，您可以自动加载它们，或者只需放置一个“加载更多”按钮（位于底部）

主干网有多个paginator插件，或者您可以简单地限制render（）函数中呈现元素的数量。
这没有必要。render（）导致此。collection.fetch（）在模型数据从服务器返回时触发“重置”事件是的，我发现解决方案是将事件侦听器与fetch（）一起使用，fetch将完成从json检索数据的工作。谢谢，这个解决方案做到了，但是el:'div#append el'不会触发整个函数，如果我将其更改为el:'body'，整个脚本都可以工作，我对此有点不清楚。