Underscore模板无法使用完全解析对象

时间:2015-01-20 18:31:27

标签: javascript backbone.js parse-platform underscore.js-templating

我正在构建一个网页,以显示基于Parse的应用的所有用户最近的捐款。我正在构建此示例Todo应用程序:https://parse.com/tutorials/todo-app-with-javascript。这是我的主.js文件中的代码(除了被替换的类名等之外,它主要反映了教程todo.js):

//Donation Model
//--------------
 var Donation = Parse.Object.extend("Donation", {
    //instance methods
    //Default attributes
    defaults: {
    },

    //Ensure that each donation created has content
    initialize: function() {
    }
});


// This is the transient application state, not persisted on Parse
var AppState = Parse.Object.extend("AppState", {
    defaults: {
        filter: "all"
    }
});

//Donation Collection
//-------------------

var DonationList = Parse.Collection.extend({
    model: Donation

});

//Donation Item View
//-----------------

var DonationView = Parse.View.extend({
    tagName: "tr",
    template: _.template($('#donation-template').html()),

    //The DOM events specific to donation
    events: {

    },

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});


//The Application
//---------------

var AdminView = Parse.View.extend({
    el: ".content",
    initialize: function() {
        var self = this;
        _.bindAll(this, 'addOne', 'addAll', 'render');
        this.$el.html(_.template($('#admin-template').html()));

        ////create out collection of donations
        this.donations = new DonationList;

        //setup the Parse query
        var query = new Parse.Query(Donation);
        query.include("user");
        query.include("charity");
        query.include("business");
        this.donations.query = query;
        this.donations.bind('add', this.addOne);
        this.donations.bind('reset', this.addAll);
        this.donations.bind('all', this.render);

        this.donations.fetch({
            success: function(donations) {
                for(var i = 0; i < donations.length;i++) {
                    console.warn(donations.models[i]);
                }
            }
        });
        state.on("change", this.filter, this);
    },

    render: function() {
        this.delegateEvents();
    },
    filter: function() {
        this.addAll();
    },
    addOne: function(donation) {
        var view = new DonationView({model: donation});
        this.$("#donation-list").append(view.render().el);
    },
    addAll: function(collection, filter) {
        this.$('#donation-list').html("");
        this.donations.each(this.addOne);
    }
});


//The main view for the app
var AppView = Parse.View.extend({
    // Instead of generating a new element, bind to the existing skeleton of
    //the App already present in the HTML.
    el: $("#adminapp"),

    initialize: function() {
        this.render();
    },

    render: function() {
        new AdminView();
    }
});

var state = new AppState;
new AppView;

从Parse中提取模型时

this.donations.fetch({
            success: function(donations) {
                for(var i = 0; i < donations.length;i++) {
                    console.warn(donations.models[i]);
                }
            }
        });

我完全拥有Donation上的所有指针关系,例如用户及其所有属性以及慈善机构及其所有属性等。但是,我有兴趣显示用户的用户名在下划线模板中捐赠,但此时捐赠的用户对象不再具有用户名属性。就好像在查询返回和向新的捐赠集合提供模板之间删除了一些属性。这是下划线模板:

<script type="text/template"  id="donation-template">
    <td><%= donationAmount %></td>
    <td><%= charity %></td>
    <td><%= user  %></td>
    <td><%= business  %></td>
    <td><%= createdAt  %></td>
</script>

donationAmount和createdAt按预期显示,但慈善,用户和业务仅显示为[对象],我无法使用点表示法访问其任何属性。如何确保下划线视图可以使用所有这些指针关系所需的属性?

1 个答案:

答案 0 :(得分:0)

将UserList设置为模型集合

return Parse.Collection.extend({
        model: User
});

执行'relation'查询并设置本地模型/ var

    this.collection = new UserList();
    this.model = this.options.model;  

    var relation = this.model.relation("users");
    this.collection.query = relation.query();       
    var user = this.model.id;
    var username = this.model.get("name");
    this.collection.fetch();