嵌套的 JSON 对象到聚合物中的一对多模型

刚从聚合物开始，需要关于使用纯javascript对象作为我的模型与聚合物元素的意见。我有一个嵌套的 json 对象，我想映射到多个到多个自定义对象，例如公司 -> 部门 -> 团队 -> 员工

我已经使用纯javascript对象完成了上面的模型，如下代码所示。

根据下面的模式，我对上面的每个实体都有一个单独的函数。现在据我所知，聚合物元素可以是与UI相关的，也可以是实用的。任何使模型与聚合物更紧密联系的建议，或者只是坚持保持模型如下。提前感谢您的见解。

function Company (json){
   this.companyID = null;
   this.companyName = null;
   this.Departments = null
   for (var prop in json){ 
        if(this[prop] !== undefined && json[prop] != null ){ 
          var iterator = json[prop]
          if(   iterator.constructor === Array  ){  
            for(var i in iterator){
              var newDepartment = new Department(iterator[i]);
              if(this.Departments == null) this.Departments = []; 
              this.Departments.push(newDepartment);
            }
          }else{
            this[prop] = iterator;
          }
        }
      };
}

实际上，从

这些自定义标记库开始进入网络之前，就有许多关于这个主题的讨论。最有说服力的是 Web 组件和模型驱动视图。该视频论证了基于标记的组件和前端建模，以及出于许多实际和社会原因。

特别关注Polymer，如果要附加任何一种观点，那么几乎没有理由拥有纯javascript模型。造成这种情况的原因（除了视频）包括：

10 次中有 9 次，您只是在复制后端某处的模型（如果您使用后端框架或存储 ORM）
这通常会导致使用 DOM 操作渲染模型。这可以用聚合物轻松处理。
Javascript应该在那里做Web平台本身无法做到的事情。自定义标记修复了很多问题。
数据绑定和模板绑定桥接了 MVC 在实践中解决的许多问题。MVC是（并且一直是）一个必要的步骤，但通常出于MDV试图开箱即用解决的相同原因。
是一个纯Javascript应用程序，否则大多数时候你的客户端应该是从服务器获取模型的视图。使用自定义标记可以提供更清晰的分离。
根据关于数据绑定的 Polymer 文档，模型就是元素本身。对于Polymer的开发人员来说，这显然是它的设计目的。

也就是说，使用纯Javascript模型有很多原因。我还没有发现很多不能通过使用数据/模板绑定来解决（并且很好地解决）的问题，尽管我已经发现了一些。我使用聚合物的次数越多，随着我学习解决该列表上问题的更新聚合物技术，该列表就越小。

关于个人偏见的说明：

请记住，以上所有内容都受到我个人观点的偏见，即平台的开发生态系统应努力满足该平台提出的理想。聚合物是我发现的第一个集中体现这一点的框架。自定义标记现在可以轻松描述内容和表示层。我可以依靠后端的强大存储方案来管理我的模型及其数据。所以对我来说，关注点的分离是明确的。

更新：一对多模型示例

此示例假定模型具有单个对象。当然，考虑单独的对象非常简单，并且是许多基于模型的UI的基础。

公司元素

<polymer-element name="x-company" attributes="company" noscript>
    <template>
        <!-- Top of Company UI -->
        <template repeat="{{department in company.departments}}">
            <x-department department="{{department}}">
            </x-department>
        </template>
        <content><content>   <!-- Insertion point for DOM children -->
        <!-- Bottom of Company UI -->
    </template>
</polymer-element>

以上是相当简单的。要实际应用公司数据，只需获取节点并设置.company = { obj }...或者如果在另一个元素的模板中，company="{{ ref }}" .请注意顶部的 noscript。它纯粹是为了简单起见，是完全可选的。一个注意事项：company.Department应该是一个对象的数组。如果您确实使用脚本，则可以使用您的 UI 完成更多操作。

部门

<polymer-element name="x-department" attributes="department" noscript>
    <template>
        <!-- Top of Department UI -->
        <template repeat="{{team in department.teams}}">
            <x-team team="{{team}}">
            </x-team>
        </template>
        <content><content>   <!-- Insertion point for DOM children -->
        <!-- Bottom of Department UI -->
    </template>
</polymer-element>

团队

<polymer-element name="x-team" attributes="team" noscript>
    <template>
        <!-- Top of Team UI -->
        <template repeat="{{employee in team.employees}}">
            <x-employee employee="{{employee}}">
            </x-employee>
        </template>
        <content><content>   <!-- Insertion point for DOM children -->
        <!-- Bottom of Team UI -->
    </template>
</polymer-element>

员工

<polymer-element name="x-employee" attributes="employee" noscript>
    <template>
        <!-- Top of Employee UI -->
        <content><content>   <!-- Insertion point for DOM children -->
        <!-- Bottom of Team UI -->
    </template>
</polymer-element>

这就像模型的 UI 一样简单。还有很多其他的可能性。这纯粹使用了 Shadow DOM，但您可以使用许多其他技术将模型应用于 Light DOM 和 Content 子项。

希望这能为您解决问题。

相关内容

最新更新

热门标签：