Question

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

我已经使用纯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;
          }
        }
      };

}

Answer 1

在这些自定义标记库开始上网之前，实际上有很多关于这个主题的讨论。最有说服力的是Web Components and Model Driven Views。该视频主要针对基于标记的组件和前端建模，以及出于实际和社会的原因。

专注于Polymer，如果要附加任何类型的视图，那么很少有理由拥有纯javascript模型。原因（除了视频）包括：

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

也就是说，使用纯Javascript模型有很多理由。我没有找到很多通过利用数据/模板绑定无法解决（并且很好地解决）的问题，尽管我已经找到了一些。我使用Polymer的次数越多，该列表就越小，因为我学习了更新的聚合物技术来解决该列表中的问题。

关于个人偏见的说明：

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

更新：一对多模型的示例

此示例假定您的模型有一个对象。当然，考虑单独的对象非常简单，并且是许多基于模型的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.departments应该是一个对象数组。如果您确实使用了脚本，那么可以使用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>

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

希望这能为你解决问题。

嵌套的json对象为聚合物中的一对多模型

1 个答案: