使用模型中未定义的模板变量渲染 Backbone.js 视图答案

【问题标题】：Rendering Backbone.js view with template variable undefined in the model使用模型中未定义的模板变量渲染 Backbone.js 视图
【发布时间】：2014-10-15 19:35:29
【问题描述】：

是否可以从一个backbone.js 视图渲染一个带有未在相关Backbone.js 模型中定义的变量的underscore.js 模板？

采取can't find variable: username 错误。

要渲染的模板：

<div class="content" id="content">               
<div id="form">
    <form action="">
        <input id="username" type="text" placeholder="Username" name="username" value= <%=username%> >
        <input id="password" type="password" placeholder="Password" name="password" >
        <ul class="table-view">
            <li class="table-view-cell">
                Remember me
                <div class="toggle active">
                    <div class="toggle-handle"></div>
                </div>
            </li>
        </ul>
        <button id="logbtn" class="btn btn-primary btn-block">Login</button>
    </form>    

<button id="renregbtn" class="btn btn-positive btn-block">Register</button>
</div>
</div>

视图中的渲染线：

this.$el.html( this.template_login( this.loginModel ) );

loginModel 模型文件中的一行：

define([
    'underscore',
    'backbone',
    ],
    function(_, Backbone) {
        var LoginModel = Backbone.Model.extend({

            urlRoot: '/login',
            initialize: function(){
                this.fetch();
            },
        });

        return LoginModel;
});

我手动设置模型。但仍然像第一个渲染案例一样出现找不到变量错误。

以上同款：

define([
    'underscore',
    'backbone',
    ],
    function(_, Backbone) {
        var LoginModel = Backbone.Model.extend({

            urlRoot: '/login',
            defaults: {
                username: "abc",
            },
            initialize: function(){
                this.fetch();
            },
        });

        return LoginModel;
});

两种情况都会导致：

ReferenceError: Can't find variable: username

只有当我将硬编码的模型 json 输入到 template_login 时它才能工作。

this.$el.html( this.template_login(  {username: "Joe"} ) );

【问题讨论】：

标签： javascript backbone.js underscore.js

【解决方案1】：

这里的问题在两个地方。在模型代码和渲染视图代码中：

首先，模型应该已经定义了模板中使用的变量，至少默认为null。

其次，视图中的渲染代码应该在同一个视图中定义的模板函数中提及模型的属性，而不仅仅是模型。

像这样：

首先，

在模型文件中：

defaults: {
            username: "",//or alternately username: null,
        },

第二

在视图文件中：

this.$el.html( this.template_login( this.loginModel.attributes ) );

【讨论】：

【解决方案2】：

我认为在默认值中定义一个变量是不够的，我之前遇到过这个问题，例如对于模型中的计算字段在我写的初始化方法中：

 initialize : function() {
            this.set({
                "calculatedField" : this.calculateField()
            });
},
calculateField:function(){
       //calculate your field or return it directly
 }

然后您可以在模板中正常使用计算字段，如果它不是计算字段，那么它应该在您的模型中，例如其余服务返回的其他字段

【讨论】：

但它现在可以使用空值以及空字符串。