2013-02-27 178 views
0
工作

我刚开始在Backbone.js模板没有Backbone.js的

在这工作,我创建了使用显示在模板中的值的简单例子underscore.js

现在我想创造一些先进的例子使用模型的东西呈现在模板的用户的价值

enter image description here

现在我的模型(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代码,获取需求,并将其存储在模板该阵列并发送相同的模板,如果第二次从它的内存请求(我得到它的代码here

但它的表现是这样的: enter image description here

(见文本框的值应该是管理,因为它是从服务器返回)

请帮助我,这真是奇怪..... .............

:(

这是从服务器(模板)来的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> 
+0

您是否尝试过的模式注入之前解码HTML模板吗? – 2013-03-01 06:52:37

回答

1

TemplateManager?你有没有在你发布的链接中看到,Derrick提到这是一个坏主意?

无论如何:你记录了$ template.html(),你只需要记录模型,那么你应该能够看到控制台出了什么问题。

+0

我保存模型以及从服务器获得的第一张图片。 – 2013-02-27 10:59:45

+0

$ template.html()的值是什么?模型的值是什么? – Greg 2013-02-27 12:26:30

+0

请参阅问题的已编辑部分我附加了模板的代码以及问题 – 2013-02-27 12:33:24

0

尝试解码从您的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">... 
+0

其实我只是打印了回访中的模型,发现它还有其他一些东西,可能是骨干的一部分,当我用这3个变量创建基本模型(firstName,lastName,id即在模板中使用)我得到的东西,但我不明白差异 – 2013-03-01 11:24:12

+0

好吧,看到我修改的答案。从模板中移除'model.get('firstName')'实现,因为这不是模板的工作方式。 – 2013-03-02 00:00:22