Question

这是我的所有代码。每当我获取集合时，它在console.log中显示为空白。但是我得到了数据作为响应。所以它抛出模板文件消息变量的未定义错误。我的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;

});

我的留言.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;

});

我的模特

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

最后我的留言收藏

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

我的消息视图的模板文件。

<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

因为在集合初始化函数中，您正在使用选项参数，您需要使用模型初始化函数中的选项值扩展模型默认值。

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

如果您传递{collection: ...}作为选项，则模型获得一个集合属性，用于指示哪个集合 model属于，用于帮助计算模型的url。该 model.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;
});

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

1 个答案: