带有动态 DTO 的下划线模板

Question

我正在寻找一种可以根据模型创建各种模板的模式。假设我有以下 getDTO 函数。

export const getDTO => [
  { 'title': 'title one', 'body': 'sample paragraph one' },
  { 'title': 'title two', 'body': 'sample paragraph two' },
]

我正在使用以下下划线模板来呈现 DTO。

<script type="text/template">
  <h1><%= title %></h1>
  <p><%= body %></p>
</script>

在我保持 DTO 不变之前它工作正常。如果我出于任何目的更改我的 DTO，它会中断呈现模板。

现在的问题是，是否有任何模式可以确保模板始终反映我的 DTO 中的更改？

Answer 1

Marionette 有一个 serializeData 方法作为模板和数据模型之间的层。

如果您更改了数据模型或模板中的任何内容，您可以在 serializeData 中进行相应的调整，而不是同时更新这两个地方。

同样，如果您不希望对数据模型的更改影响模板，您可以在它们之间创建一个层。

例如，如果您更改

export const getDTO => [
  { 'title': 'title one', 'body': 'sample paragraph one' },
  { 'title': 'title two', 'body': 'sample paragraph two' },
]

到

export const getDTO => [
  { 'heading': 'title one', 'body': 'sample paragraph one' },
  { 'heading': 'title two', 'body': 'sample paragraph two' },
]

您从

更新图层

serializeData(dto){
   return dto;
}

到

serializeData(dto){
  return {
    title: dto.heading
  }
}

因此您的模板不受影响。

带有动态 DTO 的下划线模板

underscore template with dynamic DTO

oop

design-patterns

backbone.js

underscore.js