Question

我正在使用backbone.js，有时我会收到一个fetch()的集合。我不想传递选项{add: true}，因为我的子视图的创建方式（集合循环遍历，每个项目都是附加到当前表的新行）。我试过的一件事就是清空整个表并创建所有新行，但这很慢，因为fetch()经常运行（当滚动接近表的末尾时）。它开始滞后。

我希望有一个替代方案，我可以跟踪新系列以用于追加目的，但将整个系列作为一个实体。一种可能性是创建第二个集合然后将其添加到第一个集合中，但我不确定如何/如果我应该这样做。

Answer 1

我认为创建第二个新模型集合是多余的。我试图想象你的设置，这里有一些解决方案的想法。

也许您可以采用的一种方法是更改子视图的使用方式。

当你获取（）它会重置你的集合，你似乎只需要使用新模型。在这种情况下，使用带有{add：true}的fetch听起来像是一个更好的解决方案。你提到你的子视图创建是循环的，我想象当你重置集合时，不得不循环并创建所有新的子视图可能会很慢。您是否可以更改子视图创建以对应每个模型？因此，对于添加到集合中的每个新模型，都会附加子视图。

我在想像Todo.js这样的例子。但是你问题的背景可能与我所看到的情况完全不同。

编辑：如何访问您要添加到集合中的新模型

根据我们的讨论，我发现这个帖子确认了我对fetch success选项和参数的看法。

In Backbone.js, after I perform a collection.fetch({'add':true}), how do I get the latest elements retrieved?

EDIT2：完整工作骨干示例

这是OUTPUT（像这样的东西）：

Pokemon Users

Audino  // These are in our initial collection
Bulbasaur
Charmander
Caterpie  // These are added to our collection using fetch()
Butterfree
Squirtle

这是HTML：

<body>
    <h1>Pokemon Users</h1>

    <div id="app">
        <div id="userList">     
    </div>
</body>

这是JS：

var User, UserCollection, UserView, AppView;

// Each User model has 1 attribute name
User = Backbone.Model.extend({
    defaults: {
        name: "changeMe"
    }
});

// Our collection of Users
UserCollection = Backbone.Collection.extend({
    model: User,
    url: 'user'
});

// Initialize our collection (nothing in it right now)
var myCollection = new UserCollection;

// Our UserView is each individual view, represented by the user model
UserView = Backbone.View.extend({
    tagName: 'div',
    className: 'user',
    render: function() {
        $(this.el).html(this.model.get("name"));
        return this;
    }
});

// AppView is the larger view that contains the sub-views
AppView = Backbone.View.extend({
    el: $('#app'),
    initialize: function() {
        // Binding the view to collection add events! <- This is the key
        myCollection.on('add', this.addOne, this);    // on/bind
    },
    addOne: function(user) {
        var view = new UserView({model:user});
        $('#userList').append(view.render().el);
    }
});

// Initialize the AppView -> Rock and Roll Time
var myApp = new AppView();

// I'm creating 3 new models
var userA, userB, userC;
userA = new User();
userA.set({name:"Audino"});
userB = new User({name:"Bulbasaur"});
userC = new User({name:"Charmander"});

var userAry = [userA,userB,userC];

// I'm adding these models into my collection
myCollection.add(userAry);

// When you take a look at the collection now, it only has 3 models
console.log(myCollection);

// Now we fetch the other 3 models from the server using {add:true}
// Try commenting this fetch call out to see the output minus new models
myCollection.fetch({
    add: true, success: function(collection, response) {
        // Just some extras to illustrate the success callback and args
        // console.log('collection: ');
        // console.log(collection);
        // console.log('response: ');
        // console.log(response);
    }
});

// The collection is updated rather than reset - necessary subview changes made
console.log(myCollection);

以下是PHP服务器代码 - 我使用Slim PHP进行路由：

// Returns a JSON Collection
$app->get('/user', function() use ($app) {

    $userD = array("name"=>"Caterpie");
    $userE = array("name"=>"Butterfree");
    $userF = array("name"=>"Squirtle");

    $userAry = array();
    array_push($userAry, $userD, $userE, $userF);

    $json = json_encode($userAry);
    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body($json);
});

这很有趣。我自己学到了一些东西希望能帮助到你！： - ）

Answer 2

在添加新模型后，您可以跟踪集合的当前长度，将其用作偏移量，以便将模型从该点渲染到集合的末尾。

更新：当我查看下划线文档时，我注意到了这一点：http://documentcloud.github.com/underscore/#rest

总结一下：

休息 _.rest（数组，[索引]）别名：尾
返回数组中的其余元素。传递索引以从该索引开始返回数组的值。

有了这个，你只需要跟踪你的长度是多少，然后将其他项添加到集合中，然后将其作为索引传递给休息。

跟踪收集的旧部分和新部分

2 个答案: