javascript - 模板在 Backbone.js 中不起作用

Question

我刚开始在Backbone.js工作

在那里，我创建了一个使用underscore.js显示模板中值的简单示例

现在我想创建一些高级示例，使用模型事物在模板中显示用户的值

现在我的模型是（EditProfileModel.js）：

window.EditProfileModel = Backbone.Model.extend({

constructor : function(attributes, options) {
    Backbone.Model.apply(this, arguments);
},
defaults : {
    id : '',
    firstName : '',
    lastName : '',
},
urlRoot: 'rest/editProfile'
});

EditProfileView.js：

window.EditProfileView = Backbone.View.extend({

template : 'tpl/EditProfileTpl.html',
el: content,

initialize:function () {
    this.render();
},

events: {

},

render:function () {
    var $this = this;

    var editProfileModel = new EditProfileModel({   
        id:this.model.get('id')
    });

    //GET editProfile/id
    editProfileModel.fetch({
        success : function(model){
            //console.log("I am fetch " + JSON.stringify(model));

            TemplateManager.get($this.template, function(template){

                console.log($(template).html());
                var html = _.template($(template).html(),{user : model});

                $this.$el.html(html);


                return $this;
            });
        }
    });
},

});

和带有路由器的 main.js 是：

.....
routes : {
    "profile/:id" : "editProfile"
},

editProfile : function(id){

    var $this = this;

    $this.model = new EditProfileModel({
        id:id
    });

    $('#content').html(
        new EditProfileView({
            model: $this.model
        })
    );
}


......

TemplateManager 只是一个 javascript 代码，它按需获取模板并将其存储在数组中，如果第二次从其内存中请求，则将相同的模板发回。（我在这里得到了它的代码）

但它的显示是这样的：

（请参阅从服务器返回的文本框值，它应该是admin ）

请帮助我，这真的很奇怪............

:(

这是来自服务器（模板）的 html:::

<div>
    <form id="frmEditProfile" class="form-horizontal">

        <div class="control-group">
            <label class="control-label" for="firstName">FirstName</label>
            <div class="controls">
                <input id="firstName" name="firstName" placeholder="firstName" value="&lt;%=model.get('firstName')%&gt;" autofocus="autofocus">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="lastName">LastName</label>
            <div class="controls">
                <input type="text" id="lastName" name="lastName" placeholder="lastName">
            </div>
        </div>
        <input type="hidden" name="id" value="">
        <div class="control-group">
            <div class="controls">
                <button class="btn btn-primary" id="btnSave" type="submit">
                    <i class="icon-ok"></i> Save
                </button>
            </div>
        </div>
    </form>
</div>

Answer 1

模板管理器？您是否看到在您发布的链接中，Derrick 提到这是一个坏主意？

无论如何：你记录了 $template.html()，你只需要记录模型，然后你应该能够在控制台中看到什么问题。

Answer 2

尝试解码从您的TemplateManager.

var data = model.toJSON();
var tmpl = $("<div />").html($(template).html()).text();
var html = _.template(tmpl, {firstName: data.firstName});

还将您的模板更改为：

<input id="firstName" name="firstName" placeholder="firstName" 
    value="<%= firstName %>" autofocus="autofocus">...