个人中心
gpt4 book ai didi

javascript - 跟踪集合的旧部分和新部分

转载 作者：行者123 更新时间：2023-11-29 22:25:51 25 4
gpt4 key购买 nike

我使用的是 backbone.js，有时我有一个带有 fetch() 的集合。我不想传递选项 {add: true} 因为我的 subview 的创建方式(集合循环并且每个项目都是附加到当前表的新行)。我尝试的一件事就是清空整个表格并创建所有新行，但这太慢了，因为 fetch() 经常运行(当滚动接近表格末尾时).它开始滞后。

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

最佳答案

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

也许你可以做到这一点的一种方法是改变你处理 subview 的方式。

当您 fetch() 时，它会重置您的集合，看起来您只需要使用新模型。在这种情况下，将 fetch 与 {add:true} 结合使用听起来是更好的解决方案。你提到你的 subview 创建是循环的，我想当你重置集合时，必须循环并创建所有新的 subview 会很慢。您可以更改 subview 的创建以使其与每个模型相对应吗？因此，对于添加到集合中的每个新模型，都会附加一个 subview 。

我正在想象类似 Todo.js 示例的内容。但是您的问题的上下文可能与我所看到的完全不同。

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

根据我们的讨论，我发现这个帖子证实了我对获取成功选项和参数的想法。

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

EDIT2:完整的工作主干示例

这是输出(类似这样的东西):

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

完成这项工作很有趣。我自己学到了一些东西。希望能帮助到你! :-)

关于javascript - 跟踪集合的旧部分和新部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9424607/

25 4 0
文章推荐： javascript - 谷歌地图 v3 缩放控件未显示
文章推荐： android如何通过代码设置手机闹钟
文章推荐： java - android服务检测主屏幕是否打开
文章推荐： Javascript 窗口树递归和无限对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com