Javascript 在模型中未定义模板变量的情况下呈现Backbone.js视图

是否可以从backbone.js视图中使用相关backbone.js模型中未定义的变量呈现underline.js模板

取

找不到变量：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>

loginModel模型文件的行格式：

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

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

        return LoginModel;
});

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

我手动设置模型。但是仍然像在第一个渲染案例中一样使用“找不到变量”错误

上述同一型号：

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模型输入到模板中时，它才能工作

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

---

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

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

null

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

像这样：

首先,

在模型文件中：

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

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

        return LoginModel;
});

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

第二

在视图文件中：

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

---

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

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

---

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

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