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

次のように、イベント ハッシュを使用してボタンを指すイベント リスナーをビューに追加します。

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

collection.fetch次に、このメソッドを作成し、次のようにトリガーします

,fillCollection: function(){
    this.collection.fetch();
}
于 2012-10-30T10:00:13.653 に答える
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 に答える
0

一度に何千ものアイテムを取得しないことをお勧めします。100 最大 200 百に制限します。次に、リストのスクロールを聞き始め、必要に応じて残りのアイテムを取得します（ユーザーがスクロール領域の最後に近づくと、それらを自動的にロードするか、下部に「もっと読み込む」ボタンを配置するだけです） .

Backbone にはいくつかのページネーター プラグインがあります。また、render() 関数内でレンダリングされる要素の数を単純に制限することもできます。

于 2012-10-30T10:42:31.713 に答える