从backbonejs中的集合中获取id的模型

时间:2014-05-15 04:52:00

标签: backbone.js backbone-collections

我有以下类型的收藏

[
   {
     "id": "2324324",
     "name": "name",
     "type": "type",

 },
{
    "id": "59980",
    "name": "name",
    "type": "type",

}

模型:

define(['underscore', 'backbone'], function(_, Backbone){
//Define Alert model with default properties and value
var abcModel = Backbone.Model.extend({
    idAttribute:"_id",
    defaults:{
       // My properties
    },
    initialize:function(){          

    }
});
return abcModel;
});

集合

 define(['underscore', 'backbone', 'models/abcModel', 'app/utils'], function(_, Backbone, abcModel, Utils) {

    var self;
    //List of Alerts stored in Backbone Collection
    abcListCollection = Backbone.Collection.extend({
        model: abcModel ,
        initialize: function() {           
            self = this;
            this.model=abcModel ;
        },

       fetchData: function(obj) {           
            add=true;
            var data = {
                "method": "method name",
                "params": {
                    param1:"param1",
                    param2:"param2"
                }
            }

            Utils.Ajax.post(Utils.WebAPI.WebAPIServer, data, function(response, textStatus, jqXHR) {                                
                obj.success.call(self.collection, response);
            }, 'json', function(err) {
                console.log(JSON.stringify(err));
                obj.error.call(err);
            }, "loading");

        },
        collection: {}
         });
        return abcListCollection;
});

视图

 define(['jquery', 'underscore', 'backbone', 'text!views/abcView/abcListView.html','views/abcView/ListTemplate' ,'app/utils', 'collection/abcListCollection'], function($, _, Backbone, tmpl_abcummaryView, abcListView, Utils, abcListCollection) {

 var abcListView = Backbone.View.extend({
// Setting the view's template property using the Underscore template method        
template: _.template(tmpl_abcummaryView),
// View constructor
initialize: function() {            
    abcCollection= new abcListCollection();
        mainRouter.collections.abc= new abcListCollection();          
},
// View Event Handlers
events: {

},
// Renders the view's template to the UI
render: function() {
    var self=this;
    this.$el.html(this.template({data: this.templateData}));   
    abcCollection.fetchData({
                success: function (collection, response) {                        
                    _.each(collection, function (obj) {                             
                        mainRouter.collections.abc.add(obj);                                                       
                    })
                },
                error: function (err) {
                    console.log("error");
                }
        });         
    var model1=mainRouter.collections.abc.get(2324324);
    // Maintains chainability
    return this;
}
});
return abcListView;
 });

var model1 = mainRouter.collections.abc.get(2324324); 但它返回未定义。

2 个答案:

答案 0 :(得分:0)

你可以尝试

mainRouter.collections.abc.findWhere( { id : 2324324 });

然而,似乎您的时机也可能已经结束。

.fetchData函数是一个异步调用,这意味着成功函数实际上会在行之后执行

var model1 = mainRouter.collectins.abc.get(2324324);

在上面一行放置一个调试断点,还有成功函数 - 并查看哪一个先执行。

答案 1 :(得分:0)

您的fetchData是一个异步函数。在解析异步调用之后,它将在事件循环中执行。您的代码在该通话中没有阻止。它只是重复并完全执行渲染功能。一段时间后,当该调用将返回并且您的成功回调将被调用时,您会在集合中获得一些内容。

从集合中获取模型的代码是正确的,并且应该在将模型添加到集合后进行回调。

请参阅Collection get http://backbonejs.org/#Collection-get

所以一种方法是写:

success: function (collection, response) {                        
                    _.each(collection, function (obj) {                             
                        mainRouter.collections.abc.add(obj);                                                       
                    })
                 var model1 = mainRouter.collectins.abc.get(2324324);
                },

但是,在您的视图中使用您的模型似乎并不正确。但这是你必须考虑的设计问题。

此外,我认为你应该阅读更多有关Javascript事件驱动架构的内容。我写了一个简单的博客:Learning Javascript