我认为创建第二个新模型系列是多余的。我正在尝试想象您的设置,这里有一些解决方案的想法。
也许您可以执行此操作的一种方法是更改执行子视图的方式。
当您 fetch() 时,它会重置您的集合,似乎您只需要使用新模型。在这种情况下,使用 fetch 和 {add:true} 听起来是更好的解决方案。您提到您的子视图创建是循环的,我想象当您重置集合时,必须循环并创建所有新的子视图可能会很慢。您可以更改子视图的创建以便与每个模型相对应吗?因此,对于添加到集合中的每个新模型,都会附加一个子视图。
我正在想象类似 Todo.js 示例的内容。但你的问题的背景可能与我所看到的完全不同。
编辑:如何访问您添加到集合中的新模型
根据我们的讨论,我发现这个线程证实了我对获取成功选项和参数的想法。
在 Backbone.js 中,执行 collection.fetch({'add':true}) 后,如何获取检索到的最新元素? https://stackoverflow.com/questions/8425677/in-backbone-js-after-i-perform-a-collection-fetchaddtrue-how-do-i-get-t
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);
});
这工作起来很有趣。我自己学到了一些东西。希望能帮助到你! :-)