중첩 된 json 객체는 폴리머로 1 대 다수 모델

Question

그냥 폴리머로 시작하고, 순수한 자바 스크립트 객체를 내 모델 대 폴리머 요소로 사용하는 것에 대한 의견이 필요합니다. 예를 들어 중첩 된 json 객체가 여러 객체를 여러 사용자 정의 객체에 매핑하려고합니다. 회사 -> 부서 -> 팀 -> 직원

나는 이미 아래 코드와 같이 순수 자바 스크립트 개체를 사용하여 모델을 만들었습니다.

아래 패턴을 기반으로 위의 모든 항목에 대해 별도의 기능을 가지고 있습니다. 이제 폴리머 요소는 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를 중점적으로 살펴보면 순수한 자바 스크립트 모델을 첨부하는 데 필요한 모든 종류의보기가 있어야 할 이유가 거의 없습니다. (옆으로 비디오에서) 이것에 대한 이유는 다음과 같습니다 10 명 중

• 9 번, 당신은 단지 (백 엔드 프레임 워크 또는 저장 ORM을 사용하는 경우) 백 엔드에 어딘가에 모델을 복제하는
• 이것은 종종 DOM 조작으로 모델을 렌더링하게됩니다. 이것은 Polymer로 쉽게 처리 할 수 ​​있습니다.
• 자바 스크립트는 웹 플랫폼이 기본적으로 할 수없는 일을하기 위해 존재합니다. 사용자 정의 마크 업은 많은 것을 수정합니다.
• 데이터 바인딩 및 템플릿 바인딩은 MVC가 해결해주는 많은 문제를 해결합니다. MVC는 필요한 단계이지만, MDV가 상자 밖으로 벗어나려고 할 때와 같은 이유로 자주 사용됩니다.
• 응용 프로그램이 순수한 자바 스크립트 응용 프로그램이 아니라면 대부분 클라이언트가 서버에서 모델을 가져 오는보기로 간주됩니다. 사용자 정의 마크 업 사용 은 더 깨끗한 분리를 제공합니다.
• Data Binding의 Polymer 문서에 따르면 모델은 요소 자체입니다. 이것은 분명히 Polymer의 개발자가 설계 한 것입니다.

즉, 순수한 자바 스크립트 모델을 사용하는 데에는 여러 가지 이유가 있습니다. 데이터/템플릿 바인딩을 사용하여 해결할 수없는 많은 것을 발견하지 못했지만 (일부는 발견했지만) Polymer와 더 많이 일하면서 그 목록에 대한 우려를 해소하는 새로운 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> 

모델의 UI만큼이나 간단합니다. 다른 많은 가능성이 있습니다. 이것은 Shadow DOM을 순수하게 사용하지만 Light DOM 및 Content 하위에 모델을 적용하는 데는 다른 많은 기술을 사용할 수 있습니다.

바라건대, 이렇게하면 문제가 해결되기를 바랍니다.