폴리머 데이터 사용자 정의 요소 내 바인딩

Question

나는 http://www.polymer-project.org/docs/polymer/binding-types.html#iterative-templates의 예제를 따라 왔으며 작동 코드가 없습니다.

내 친구가 몬스터 게임에 대한 좋은 아이디어를 가지고 있기 때문에 내가 만들고있는 몬스터 생성 도구에 대한 폼 폴리머 요소를 만들려고 노력 중이며 그에게 그의 아이디어를 추적하도록 돕고 싶습니다. .

그래서 괴물 통계 필드에 대한 맞춤 요소를 만들었습니다. 우리는 모든 통계가 마침내 될 것이라는 것을 100 % 확신하지 못하기 때문에 이것을 가능한 모듈 식으로 만들고 싶습니다.

<link rel="import" href="../../../bower_components/paper-input/paper-input.html"> 

<!-- Calling noscript until I can better understand --> 
<polymer-element name="monster-stat-field" 
attributes = "stat value" 
noscript 
> 

<template> 
    <div id="name"> 
     {{stat}} 
    </div> 
    <div id="value"> 
     <paper-input 
      type="number" 
      error="Required, needs to be a number!" 
      required 
      label="{{stat}}" 
      value="{{value}}" 
      layout vertical> 
     </paper-input> 
    </div> 
</template> 

</polymer-element> 

이것은 용지 입력을 상속해야합니다. 다른 사용자 폴리머 요소에 중첩되어 내가 무슨 짓을했는지

:

<link rel="import" href="../monster-stat-field/monster-stat-field.html"> 
<link rel="import" href="../../../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../../../bower_components/paper-button/paper-button.html"> 

<!-- Calling noscript until I can better understand --> 
<polymer-element name="monster-form" 
attributes = "name desc stats" 
noscript 
> 
<template> 
    <p> 
     <paper-input 
      label="Monster Name" 
      value="{{name}}" 
      required 
      floatingLabel 
      error="Required Field!"> 
     </paper-input> 
    </p> 
    <p> 
     <paper-input 
      label="Description" 
      value="{{desc}}" 
      floatingLabel> 
     </paper-input> 
    </p> 
    <template repeat="{{s in stats}}"> 
      <p> 
       <monster-stat-field stat="{{s.name}}" value="{{s.value}}"> 
       </monster-stat-field> 
      </p> 
    </template> 

    <paper-button label="Save" raisedButton></paper-button> 
</template> 

</polymer-element> 

그리고는 내 메인 페이지에 나는이 : 그래서

<link rel="import" href="static/customComponents/monster/monster-form/monster-form.html"> 
...some other stuff... 
    <monster-form 
     name="Amalgam" 
     desc="The Liquid Metal" 
     stats="[ 
      {name: 'hp', value: 60}, 
      {name: 'cost', value: 60}, 
      {name: 'ene', value: 90}, 
      {name: 'str', value: 90}, 
      {name: 'wis', value: 75}, 
      {name: 'def', value: 95}, 
      {name: 'man', value: 90}, 
      {name: 'agi', value: 100} 
      ]" 
    ></monster-form> <br/> 
    <p>Here is calling the monster stat field manually</p> <br/> 
    <monster-stat-field stat="HP" value="60"> 
    </monster-stat-field> 

! 내가 표시 한 것은 괴물의 이름과 내역이지만 통계는 전혀 없습니다. 수동으로 호출하면 작동하지만, 명시 적으로 가져 오지 않았기 때문에이 이상한 점을 발견했습니다.

noscript를 호출했기 때문에이게 맞습니까? 아니면 다른 것입니까? 어떤 도움이라도 대단히 감사하겠습니다. 고맙습니다!

이

stats 속성에 대한 귀하의 JSON 문자열이 올바르지 않습니다 :

Answer 1

당신은 그것이 작동되도록하는 두 가지를 변경해야합니다. 당신은 해시 키 arround를 따옴표가 필요합니다

stats='[ 
      {"name": "hp", "value": 60}, 
      {"name": "cost", "value": 60}, 
      {"name": "ene", "value": 90}, 
      {"name": "str", "value": 90}, 
      {"name": "wis", "value": 75}, 
      {"name": "def", "value": 95}, 
      {"name": "man", "value": 90}, 
      {"name": "agi", "value": 100} 
]' 

을 그리고 당신은 고분자가 배열로 변환 할 필요가 있음을 알 수 있도록 stats 속성의 유형을 암시합니다. monster-form 요소에서 noscript 특성을 제거하고 created 핸들러 함수를 추가

가

<script> 
    Polymer('monster-form', { 
     created: function() { 
      this.stats = []; 
     } 
    }); 
</script> 

지금 폴리머 (개체) 배열로 stats 속성을 문자열로 변환한다.