1

我有大量的 json 对象集合，我通过搜索函数检索它们，虽然取决于搜索字符串，但输出可以达到我填充到列表中的数千个数组。在移动环境中，一旦我将 touchmove、touchstart 和 touchend 添加到每个对象，这就会变得很麻烦并且会消耗内存。我找到了解决这个问题的方法，即使用backbone.js 显示对象的最小方式，并且使用诸如按钮之类的触发器，这可能会变得健壮。虽然我不知道如何继续它。这是没有按钮的工作示例。我应该怎么做？

<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>
4

3 回答 3

1

如果我理解你，那么这应该工作：

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();
    }
});
于 2012-10-30T09:57:06.607 回答
1

将事件侦听器添加到您的视图中，并使用事件哈希指向您的按钮，如下所示

,events {
   "click #buttonID" : "fillCollection"// <- this is a method name
}

然后创建这个方法并触发一个collection.fetch，像这样

,fillCollection: function(){
    this.collection.fetch();
}
于 2012-10-30T10:00:13.653 回答
0

我建议不要一次获取数千件物品。将其限制为 100 最大 200 百。然后我会开始收听列表上的滚动，并根据需要获取其余项目（一旦用户接近滚动区域的末尾，您可以自动加载它们，或者只需在底部放置一个“加载更多”按钮） .

Backbone 有几个分页器插件，或者您可以简单地限制 render() 函数中渲染元素的数量。

于 2012-10-30T10:42:31.713 回答