模板在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

TemplateManager？ 您是否看到在您发布的链接中Derrick提到这是一个坏主意？

无论如何：您记录了$ template.html（），只需要记录模型，那么您应该能够在控制台中看到问题所在。

Answer 2

尝试解码从TemplateManager返回的HTML实体。

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">...