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

Question

刚从聚合物开始，需要关于使用纯 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;
          }
        }
      };

}

Answer 1

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

特别关注 Polymer，如果要附加任何类型的视图，则几乎没有理由拥有纯 javascript 模型。这样做的原因（视频除外）包括：

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

也就是说，使用纯 Javascript 模型的原因有很多。尽管我已经找到了一些，但我还没有发现很多无法通过使用 data/template 绑定来解决（并且很好解决）的问题。我使用 Polymer 的次数越多，当我学习更新的 Polymer 技术来解决该列表中的问题时，该列表就会变得越小。

个人偏见注意事项：

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

更新：一对多模型的例子

此示例假设您的模型只有一个对象。当然，考虑单独的对象非常简单，并且是许多基于模型的 UIs 的基础。

公司元素

<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>

这就像您模型的 UI 一样简单。还有很多其他的可能性。这纯粹使用阴影 DOM，但您可以使用大量其他技术将模型应用到灯光 DOM 和内容子项。

希望这能帮您解决问题。

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

nested json object to a one to many model in polymer

json

object-model

polymer