2014-07-13 2 views
7

사용자가 제공하지 않을 때 기본값을 사용하는 사용자 지정 요소에 옵션 개체 특성을 설정하려고합니다. 내가 지금 그 옵션 값과 기본 값 전달에게 설정을 설정하는 방법 위의 코드는 항상 내가에서 통과하려고보다 우선 요소 생성자에 지정된 값으로 작동하지 않습니다기본값이있는 폴리머 개체 특성

<!DOCTYPE html> 
<html> 
<head> 
    <script src="bower_components/platform/platform.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
</head> 
<body> 
    <my-element options="{{{ 
       option_1: 'val1', 
       option_2: 'val2', 
       allow_this: true, 
       allow_that: false 
      }}}"> 
    </my-element> 
</body> 
</html> 

<polymer-element name="my-element" attributes="options"> 
    <template> 
     <ul> 
      <!-- ... --> 
     </ul> 
    </template> 

    <script> 
     Polymer('my-element', { 
      options: { 
       option_1: 'default_val1', 
       option_2: 'default_val2', 
       allow_this: false, 
       allow_that: false 
      } 
     }); 
    </script> 

</polymer-element> 

. 대체 수단으로 만 사용됩니까?

답변

7

속성에서 JSON을 사용하여 게시 된 속성에 객체 값을 전달할 수 있지만 엄격하게 유효한 JSON (http://jsonlint.com/)이어야합니다.

이 경우, 시도 :

<my-element options='{ 
      "option_1": "val1", 
      "option_2": "val2", 
      "allow_this": true, 
      "allow_that": false 
     }'> 
</my-element> 

공지 속성에 작은 따옴표와 큰 따옴표를 JSON 자체 내부. 큰 따옴표는 JSON 사양에서 필요합니다.

이것은 데이터 바인딩이 아니므로 콧수염 표기 {{ }}을 사용하지 않습니다. 대신, Polymer가 객체로 직렬화 (JSON.parse) 할 속성에 문자열 값을 기술하는 것입니다.

+0

'bindings'을 값'options = '{ "option_1": "[[ajax.response]]"}'로 전달하는 것은 어떻습니까? Polymer는 구성 요소에서 초기화 할 경우 다음과 같이 변환하지 않습니다 :'options : {}' –

3

데이터 바인딩은 폴리머 요소 외부에서 작동하지 않습니다. auto-binding template element을 사용하거나 my-element의 사용을 다른 사용자 정의 폴리머 요소로 바꿉니다.

하지만 옵션 표현식에 구문 분석 오류가 표시됩니다. 개체 중괄호 주위에 공백을 넣어야합니다 (options="{{ { ...} }}").

배열 및 개체 속성 초기화에 대한 Polymer 문서의 Adding public properties and methods 섹션에서 경고를 확인해야합니다.

관련 문제