带有requirejs的骨干 - 传递给视图时“模型未定义”

Posted

技术标签:

【中文标题】带有requirejs的骨干 - 传递给视图时“模型未定义”【英文标题】:Backbone with requirejs - "model is not defined" when passing to view 【发布时间】:2013-03-29 19:21:16 【问题描述】:

从另一个视图中渲染视图时,我收到一个 JS 错误“未捕获的 ReferenceError:模型未定义”。

我有一个列表视图:

define([
    'jquery', 
    'backbone',
    'underscore',
    'views/action',
    'collections/actionlist',
    'text!templates/actionlist.html'],

function($, Backbone, _, actionView, actionList, template)

var someactions = [
     the_action: "Contact 1", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" ,
     the_action: "Contact 2", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" ,
     the_action: "Contact 3", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" 
];

var actionlistView = Backbone.View.extend(

    el: '#main',
    template: _.template(template),

    initialize: function () 
        this.collection = new actionList(someactions);            
        this.collection.on("add", this.renderAction, this);
    ,

    events: 
        "click #add": "addAction"
    ,

    render: function () 
        var $el = $('#main')

        $el.html(this.template);

        // Get Actions
        _.each(this.collection.models, function (action) 
            this.renderAction(action);
        , this);

    ,

    renderAction: function (action) 
        var theAction = new actionView( model: action );
        $('#actionlist').append(theAction.render().el);
    ,

    addAction: function(e)
        e.preventDefault();
        var formData = ;

        $('#addAction').children("input").each(function(i, el)
            if ($(el).val() !== "") 
                formData[el.id] = $(el).val();
            
        );

        this.collection.create(formData);
    
);

return actionlistView;
);

这个在renderAction函数中调用的actionView是:

define([
    'jquery', 
    'backbone',
    'underscore',
    'models/action',
    'text!templates/action.html'], 

function($, Backbone, _, actionModel, template)

var actionView = Backbone.View.extend(
    tagname: 'li',
    template: _.template(template),

    render: function () 
        this.$el.html(this.template(this.model)); // ERROR OCCURS ON THIS LINE
        return this;
    
);

return actionView;
);

我在“this.$el.html(this.template(this.model));”行收到错误尝试渲染第一个 actionView 时。

我被难住了!!我错过了什么?

按要求操作视图模板:

    <b class="name"><%=model.get("the_action")%></b> - <%=model.get("due")%> - 
    <em>from <%=model.get("list")%></em>

【问题讨论】:

你也可以发布你的actionView模板吗? 你应该尝试使用this.$el.html(this.template(model: this.model ));调用模板 【参考方案1】:

你最好在模板中调用model.toJSON()并在模板中引用json。

从这里:

this.$el.html(this.template(this.model));

到这里:

this.$el.html(this.template(this.model.toJSON())); 

然后直接在模板中引用'due'和'list':

<b class="name"><%=the_action%></b> - <%=due%> - 
    <em>from <%=list%></em>

【讨论】:

谢谢。就是那个!

以上是关于带有requirejs的骨干 - 传递给视图时“模型未定义”的主要内容,如果未能解决你的问题,请参考以下文章

RequireJS:如何将变量从一个文件传递到另一个文件?

`lib` 中的骨干木偶、RequireJS 和依赖项

将参数从带有分页的元素列表传递给引导模式

带有 Marionette 视图的主干模式 - 子视图事件没有被触发

带有 RequireJS 的数据表按钮扩展

使用带有 RequireJS 的私有 jquery - 优化后的问题