2014-10-01 3 views
1

json에서 Polymer 하위 메뉴 및 항목을 생성하려고합니다. 이 코드는 하위 메뉴 & 항목 템플릿 중첩 : JSON 데이터가 오래된 방법을 구성 할 수폴리머 하위 메뉴 및 json의 항목

<polymer-element name="years-submenu" noscript> 
    <template> 
    <core-ajax auto url="../json/years and offices.json" response="{{items}}" handleAs="json"></core-ajax> 
    <template repeat="{{item in items}}"> 
     <core-submenu icon="visibility" label="{{item.year}}"> 
      <template repeat="{{office in item.offices}}"> 
      <core-item id="{{item.year}} {{office}}" label="{{item.year}} {{office}}"></core-item> 
      </template> 
     </core-submenu> 
    </template> 
    </template> 
</polymer-element> 

을하지만, 현재는 다음과 같습니다 :이 사무실을 몇 년을 렌더링 있지만

[ 
    { 
     "offices": [ 
      "Mayor", 
      "Council At-Large" 
     ], 
     "year": "2014" 
    }, 
    { 
     "offices": [ 
      "Council Chairman", 
      "Council At-Large", 
      "Council Ward 2", 
      "Council Ward 4" 
     ], 
     "year": "2012" 
    } 
] 

이름. 이상하게도 크롬의 요소를 검사하면 ID 대신 {{item.year}} 및 {{office}}을 삽입하고 레이블에는 삽입하지 않는다는 것을 알 수 있습니다. 나는 명시 적으로 바인딩하는 다양한 방법을 시도했지만 아무 소용이 없다. 물론, 나는 틀린 길을 시도했을지도 모른다. 이 작품을 만드는 방법에 대한 아이디어는 대단히 감사하겠습니다.

+1

이있는 경우

는 github의 문제/풀 요청을 만듭니다. 사용중인 모든 요소를 ​​가져 오시겠습니까? – ebidel

+0

@ebidel 의심 할 여지없이 나는 다른 것을 잘못하고있다. jsbin 코드를 보면 하위 메뉴의 레이블이 보이지 않는 것 같습니다. 내 코드에서는 그 반대가 문제입니다. 항목이 표시되지 않습니다. 하위 메뉴 레이블이 jsbin 코드에 표시되지 않는 이유를 설명 할 수 있습니까? 그건 내가 이해하는 데 도움이 될거야. – Don

+0

@ebidel 아니면, 적어도 나는 생각합니다. 내 bower_components의 core-menu 폴더 안에있는 core-submenu.html에서 core-submenu를 가져오고 있습니다. 그 맞습니까? (코어 서브 메뉴를 별도로 설치하는 것을 시도했지만 그렇게 할 수 없었습니다.) – Don

답변

1

내가 내 사용자 지정 요소 내 안에 내 하위 코드를 래핑 (내부가 아닌 내 사용자 지정 요소를 감싸는 메인 페이지에서 하위 메뉴를 호출 넣으면 작동하는지 밝혀졌습니다. 그래서

게시 요소를 호출 질문에서 작동하지 않습니다 다음과 같이

<core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme"> 
    <years-submenu></years-submenu> 
</core-menu> 

을하지만이 작업을 수행하는 메인 페이지에서 호출 다음 :

<polymer-element name="years-menu" noscript> 
    <template> 
    <core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme"> 
     <core-ajax auto url="../json/years and offices.json" response="{{items}}" handleAs="json"></core-ajax> 
     <template repeat="{{item in items}}"> 
     <core-submenu icon="visibility" label="{{item.year}}"> 
      <template repeat="{{office in item.offices}}"> 
      <core-item id="{{item.year}} {{office}}" label="{{item.year}} {{office}}"></core-item> 
      </template> 
     </core-submenu> 
     </template> 
    </core-menu> 
    </template> 
</polymer-element> 

내가 완전히 이유를 이해하지 않습니다, 그러나 문제는 해결되었다.

0

JSON에서 메뉴를 만들기 위해 폴리머 요소를 만들었습니다. 다른 멋진 기능이 있으며 계속 향상시킬 것입니다.

정확하게 귀하의 질문에 꼭 맞는 것은 아니지만 그것을 확인하십시오. http://jsbin.com/fejewo/1/edit : 당신이 나를 위해 일하고있어 문제/아이디어

https://github.com/sup3rb0wlz/nb-menu