Question

我们正在建立一种调查机制，让用户可以创建自己的一组问题，类型等。用户可以一次显示一个元素。或者一组问题。我使用霓虹动画页面从一个单一的问题转到另一个。

- index.html -

<iron-pages attr-for-selected="data-route" selected="{{route}}">
   <section data-route="home">
     <test-survey surveyid="99999999-9999-9999-9999-999999999999" submissionid='00000000-0000-0000-0000-000000000000'}' ></test-survey>
   </section>

   <section data-route="users">
       <paper-material elevation="1">
       </paper-material>
   </section>

   <section data-route="user-info">
       <paper-material elevation="1">
       </paper-material>
   </section>

   <section data-route="contact">
       <paper-material elevation="1">
       </paper-material>
    </section>
</iron-pages>

- 测试survey.html -

<div class="vertical layout">
  <div class="flex">
    <neon-animated-pages id="views" class="flex" selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
    <test-template items="{{survey.Questions}}" id="surveyquestions">
    </test-template>
  </neon-animated-pages>
    <paper-toast
      id="toast"
      text="Saved successfully.">
    </paper-toast>
   </div>
</div>

由于需要能够将问题组合在一起，我们将以下代码移到另一个文件中，因此可以从提出单个问题的地方调用它。或者从一个将问题列表作为一组的地方，并在一个部分中显示它们。

- 测试template.html -

<template>
    <template is="dom-repeat" id="surveyquestions" items="{{items}}" sort="_sort">

        <template is="dom-if" if="{{isFormat(item.Type, 'Single-Select')}}" >
           <question-singleselect question="{{item}}"></question-singleselect>
        </template>

        <template is="dom-if" if="{{isFormat(item.Type,'Open-Ended')}}">
           <question-openended question="{{item}}"></question-openended>
        </template>

        <template is="dom-if" if="[[isFormat(item.Type,'Multi-Select')]]">
             <question-multiselect question="{{item}}"></question-multiselect>
        </template>

        <template is="dom-if" if="[[isFormat(item.Type,'Section')]]">
           <question-section question="{{item}}"></question-section>
        </template>

        <template is="dom-if" if="{{isFormat(item.Type,'Numerical')}}">
           <question-numerical question="{{item}}"></question-numerical>
        </template>
    </template>
</template>

- 测试于chrome.html -

<template>
    <paper-card heading="{{question.Title}}" id="paper-card-{{question.Id}}">
       <div class="card-content {{question.Type}}">
           <div class="questionanswers">
              <content select=".questionanswers"></content>
           </div>
       </div>

       <div class="card-actions">
          <paper-button class="raised primary" on-tap="prevAction" id="prevButton_{{question.Id}}" hidden$="{{_hidePrev(question.Type)}}">Previous</paper-button>
          <paper-button class="raised primary" on-tap="nextAction" id="nextButton_{{question.Id}}" hidden$="{{_hideNext(question.Type)}}">Next</paper-button>
          <paper-button class="raised primary" on-tap="saveAction" id="saveButton_{{question.Id}}" hidden$="{{_hideSave(question.Type)}}">Submit</paper-button>
      </div>

    </paper-card>
</template>

一旦我将问题类型列表放在一个单独的表单中，它就停止了工作。它在一个页面上列出了所有问题，而不是从一个问题导航到下一个问题。如果test-template.html的部分返回test-survey.html

，则可以正常工作

带有嵌入式dom-repeat元素的霓虹动画页面

0 个答案: