Polymer：javascriptを使って紙のチェックボックスを作成する

Question

私はJsonオブジェクトからquesionを要求する調査のためのフォームを作成しています。 私のコードはこれまでのところ動作しますが、私はポリマーやJSの機能を知っていないので、より美しく見せてくれます。 スクリーンショット：

スクリプト：

var questions = [ 
 
    { 
 
     "question": "What do you want for christmas?" 
 
     , "mode": "radio" 
 
     , "answers": ["Nintendo", "iPony", "You", "A tiny little Shotgun"] 
 
    } 
 
]; 
 
console.log(questions); 
 

 
function foo() { 
 
    var question = document.createElement('div'); 
 
    question.className = 'question'; 
 
    question.innerHTML = "Frage:" + questions[0].question; 
 
    console.log(question); 
 
    var surveyQuestions = document.getElementById("survey-questions"); 
 
    surveyQuestions.appendChild(question); 
 

 
    var answers = document.createElement('div'); 
 
    answers.className = "answers"; 
 

 
    
 
    questions[0].answers.forEach(buildRadio); 
 
    
 
    surveyQuestions.appendChild(answers); 
 

 

 
    function buildRadio(item, index) { 
 
     var paperCheckbox = document.createElement('paper-checkbox'); 
 
     var br = document.createElement('br'); 
 
     paperCheckbox.setAttribute("name",item); 
 
     paperCheckbox.setAttribute("value",item); 
 
     paperCheckbox.getElementsByTagName('div')[1].innerHTML = item; 
 
     paperCheckbox.children[1].innerHTML = item; 
 

 
     answers.appendChild(paperCheckbox); 
 
     answers.appendChild(br); 
 
    } 
 
}

私の問題のためのもう一つの小さなexmaple：

<div class="card"></div> 

が作成

<div class="card style-scope survey-app"></div> 

しかし

var card = document.createElement('div'); 
card.className = "card"; 

は唯一のベストプラクティスがどうなるか

<div class="card"></div> 

を作成しますか？

Answer 1

ソリューションはdom-repeatを使用しているし、それは素晴らしい作品：

<template is="dom-repeat" items="{{questions}}"> 
 
      <div class="card"> 
 
       <div class="question">Frage {{index}}: {{item.question}}</div> 
 
       <template is="dom-if" if="{{_isCheckQuestion(item)}}"> 
 
        <template is="dom-repeat" items="{{item.answers}}"> 
 
         <paper-checkbox>{{item}}</paper-checkbox> 
 
         <br> 
 
        </template> 
 
       </template> 
 
       <template is="dom-if" if="{{_isRadioQuestion(item)}}"> 
 
        <paper-radio-group> 
 
         <template is="dom-repeat" items="{{item.answers}}"> 
 
          <paper-radio-button name="{{item}}">{{item}}</paper-radio-button> 
 
          <br> 
 
         </template> 
 
        </paper-radio-group> 
 
       </template> 
 
      </div> 
 
     </template>

しかしdom-ifは

<script> 
 
    Polymer({ 
 
     is: 'survey-app' 
 
     , properties: { 
 
      prop1: { 
 
       type: String 
 
       , value: 'survey-app' 
 
      } 
 
     } 
 
     , ready: function() { 
 
      this.questions = [ 
 
       { 
 
        "question": "What do you want for christmas?" 
 
        , "mode": "check" 
 
        , "answers": ["Nintendo", "iPony", "You", "A tiny little Shotgun"] 
 
     } 
 

 

 
       , { 
 
        "question": "Yes or no?" 
 
        , "mode": "radio" 
 
        , "answers": ["yes", "no"] 
 
     }, 
 

 
    ]; 
 
     } 
 
     , _isCheckQuestion: function (question) { 
 
      return question.mode == 'check' 
 
     } 
 
     , _isRadioQuestion: function (question) { 
 
      return question.mode == 'radio' 
 
     } 
 
    }); 
 

 
</script>

少しトリッキーです10