2013-04-26 31 views
0

这是我现在怎么做,但我想要做的是使从模板数据没有这样做(serialized_model.items [0]):如何在不序列化模型的情况下呈现模板数据?

template: function(serialized_model){ 
     var user_data_tmpl = $("#user-data-template").html(); 
     var template = Handlebars.compile(user_data_tmpl); 
     return template(serialized_model.items[0]); 
    } 

我得到的结果,从一个很难精细但这是全码:

模型&收藏:

window.UserData = {}; 

UserData.Model = Backbone.Model.extend(); 

UserData.Collection = Backbone.Collection.extend({ 

    model:UserData.Model, 

    url: '/getUserData', 

    parse: function(response) { 
     return response.data; 
    } 

}); 

的观点:

UserData.View = Backbone.Marionette.ItemView.extend({ 

    template: function(serialized_model){ 

     var user_data_tmpl = $("#user-data-template").html(); 
     var template = Handlebars.compile(user_data_tmpl); 
     return template(serialized_model.items[0]); 
    } 

}); 

模板:

<script id='user-data-template' type='text/x-handlebars-template'> 
    <a href="#" id="logout"> Logout </a> 
    uid:{{uid}} username:{{username}} clave:{{clave}} 
</script> 

的JSON:

{"success":true,"data":{"logged":true,"uid":14,"clave":14,"depto":9,"nivel":5},"report":null} 
+0

“我想要做的是从模板渲染数据而不这样做”......不做什么?使用模板?使用模型为这些模板提供动力?从模型中提取数据?我不确定你的问题是什么......如果你要使用模板,并且你想用模型中的数据填充这些模板中的值,那么在某些时候你必须得到模型的数据(例如,通过'toJSON'),因为Handlebars不采用原始的骨干模型。 – machineghost 2013-04-26 21:17:26

+0

@machineghost对不起,我编辑了内容,我想要实现的是从模板中自动编译数据,而不用做模板funcion中的所有内容,以前我曾用一行代码做过:template:Handlebars.compile( $('#user-data-template')。html()), – Uuid 2013-04-26 21:28:13

+0

我现在明白了(我认为);请参阅下面的答案。 – machineghost 2013-04-26 23:18:14

回答

1

我们在我们的代码库来处理这个问题的方法很简单,就是有一个BaseView类,所有的我们的观点从延伸。这种观点有renderTemplate方法和一些辅助方法,这是这个样子:

renderTemplate: function() { 
    this.$el.html(this.templatedHtml()); 
    return this; 
}, 
templatedHtml: function() { 
    return this.template(this.getTemplateData()); 
}, 
getTemplateData: function() { 
    return _({}).extend(this.model.toJSON()); 
} 

我们的比稍微复杂一些,但希望你的想法。问题的关键是,如果你建立自己renderTemplate方法上BaseView类,那么你可以让新的浏览...

var YourView = BaseView.extend({ 
    template: yourCompiledTemplate 
}); 

var yourViewInstance = new YourView({model: someModel}); 
// Apply template to yourViewInstance: 
yourViewInstance.renderTemplate(); 

这样:

  • 一切自动发生
  • 你不”如果你想添加更多的东西(例如,你希望能够将模板定义为字符串,或者你想要在脚本标签中定义它们并指定这些标签的ID,并且让你的视图有所改变,那么你不得不重复任何东西
  • 在t中编译o为你添加一个Handlebars模板)这是非常容易添加的
相关问题