0

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は、オンデマンドでテンプレートをフェッチして配列に格納し、メモリから2回目の要求があった場合に同じテンプレートを送り返す、単なるjavascriptコードです（ここでコードを取得しました）

しかし、このように表示されます： ここに画像の説明を入力してください

（サーバーから返されるテキストボックスの値を参照してください）

私を助けてください、これは本当に奇妙です.................。

:(

これはサーバー（テンプレート）から来ている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>
4

2 に答える 2

1

TemplateManager？あなたが投稿したリンクの中で、デリックはそれが悪い考えだと言っているのを見ましたか？

とにかく：$ template.html（）をログに記録しました。モデルをログに記録するだけで、コンソールで何が問題になっているのかを確認できるはずです。

于 2013-02-27T10:58:20.537 に答える
0

から返された HTML エンティティをデコードしてみてください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">...
于 2013-03-01T07:03:55.970 に答える