如何在骨干js中解析视图中的消息

Question

Here is all my code. Whenever I fetch collection it shows blank in console.log.But I got data in response. So its throws undefined error of variable of templates file messages. My App.js.

/*global define*/
define([
    'jquery',
    'underscore',
    'backbone',
    'collections/messageCollection',
    'views/message',
    'text!templates/main.html',
    'models/agentModel',
    'models/messageModel',
    'common'
], function ($, _, Backbone, Messagecollection, Message, mainTemplate, Agent,MessageModel,Common) {
    'use strict';

    var AppView = Backbone.View.extend({
        el: '#chatview',
        template: _.template(mainTemplate),
        events: {
            'click #new-message':'sendMessage',
        },
        initialize: function () {
            this.render();

        },
        render: function () {
            this.$el.html(this.template);
            this.subrender();

        },
        subrender:function(){
            this.$message = this.$('#messages');
            this.$header = this.$('#chat-head');
            var list = new Messagecollection();
            var message = new Message({ collection: list});
            this.$message.append(message);
        },
        sendMessage : function(){
            // var list = new Messagecollection();
            // var inputField = $('#message-to-send');
            // list.create({message: inputField.val()});
            // inputField.val('');

        },

    });
    return AppView;

});

My Message.js

/*global define*/
define([
    'jquery',
    'underscore',
    'backbone',
    'collections/messageCollection',
    'text!templates/message.html',
    'models/messageModel',
    'common'
],function ($, _, Backbone,MessageCollection ,messageTemplate, Messagemodel,Common) {
    'use strict';
    var MessageView = Backbone.View.extend({
        el : '#messages',
        template: _.template(messageTemplate),
        initialize: function(){
            this.render();
            return this;
        },
        render: function(){
            var Mess = new MessageCollection();
            this.$el.html(this.template(Mess.fetch()));
        },

    });
    return MessageView;

});

My Model

/*global define*/
define([
    'underscore',
    'backbone',
    'common'
], function (_, Backbone,common) {
    Backbone.emulateHTTP = true;
    var MessageModel = Backbone.Model.extend({
        defaults: {
            id:'',
            message:'sdsd message',
            name: 'name',
            me:true,
            time:'10:00',
        },
        initialize: function () {
           console.log('message model loaded successfully');
        },
        url: function(){
            return common.root_url +"/api/messages/messageall";
        },

    });
    return MessageModel;
});

And Final my Message Collection

/*global define */
define([
    'underscore',
    'backbone',
    'models/messageModel',
    'common'
], function (_, Backbone,MessageModel,common) {
    'use strict';
    var MessageCollection = Backbone.Collection.extend({
        model: MessageModel,
        url: function(){
            return common.root_url +"/api/messages/messageall";
        },
        initialize: function(models, options) {
            options = options || {};
            this.url = options.url || common.root_url +"/api/messages/messageall";
        },
    });
    return MessageCollection;
});

My Template file of message view.

<li class="clearfix">
    <div class="message-data align-right">
        <span class="message-data-time"><%- time %></span> &nbsp; &nbsp;
        <span class="message-data-name"><%- name %></span> <i class="fa fa-circle me"></i>
    </div>
    <div class="message other-message float-right">
        <%- message %>
    </div>
</li>

Answer 1

Because in collection initialize function you are using the option parameter you need to extend the model default values with the option values inside the model initialize function.

initialize: function () {
   this.options = _.extend({}, this.defaults, this.options);
},

If you pass a {collection: ...} as the options, the model gains a collection property that will be used to indicate which collection the model belongs to, and is used to help compute the model's url. The model.collection property is normally created automatically when you first add a model to a collection.

/*global define*/
define([
    'underscore',
    'backbone',
    'common'
], function (_, Backbone,common) {
    Backbone.emulateHTTP = true;
    var MessageModel = Backbone.Model.extend({
        defaults: {
            id:'',
            message:'sdsd message',
            name: 'name',
            me:true,
            time:'10:00',
        },
        initialize: function () {
           this.options = _.extend({}, this.defaults, this.options);
        },
        url: function(){
            return common.root_url +"/api/messages/messageall";
        },

    });
    return MessageModel;
});