Question

我在ractive.js循环中生成了多个问题。每个问题都有不同价格的多个答案。我需要计算总价并在每次选择的答案发生变化时重新计算。需要帮助。

我制作了这个代码：http://codepen.io/Nitoiti/pen/GjxXvo

＆＃13;

<h1>Get total price</h1>
 <div id='container'></div>

  <script id='template' type='text/ractive'>

    {{#each designQuestions}}
    <p><span>{{id}} </span> {{question}}</p>
        {{#each answers}}
        <label><input type='radio' name='designQuestions-answers-{{id}}' value='{{price}}' {{#if selected}} checked {{/if}} >{{answer}} - {{price}}</label>
        {{/each}}
    {{/each}}
    
                    
    <table class="total">
        <tr>
            <td>total price:</td>
            <td>{{total}}</td> <!-- how to calculate total price and change it on radio buttons change? -->
        </tr>
    </table>                
  </script>

 <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

<script>
      
    var ractive, designQuestions;  
      
    designQuestions = [
        { id: '1', 
          question: 'Question1 ?', 
          answers: [ 
              {answer:'answer1',price:'222', selected: 'selected'},
              {answer:'answer2',price:'553'},
              {answer:'answer3',price:'22'},
              {answer:'answer4',price:'442'}
            ]
        },
        { id: '2', 
          question: 'Question2 ?', 
          answers: [ 
              {answer:'answer1',price:'22'},
              {answer:'answer2',price:'55', selected: 'selected'},
              {answer:'answer3',price:'0'},
              {answer:'answer4',price:'44'}
            ]
        }
        
      ];  
   
    
    
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: '#container',

      // We could pass in a string, but for the sake of convenience
      // we're passing the ID of the <script> tag above.
      template: '#template',

      // Here, we're passing in some initial data

        data: {
          designQuestions: designQuestions
        }
     
      
    });
  </script>

＆＃13;

Answer 1

嗯'我自己找到了解决方案。

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Ractive test</title>
</head>

<body>
  <h1>Калькулятор</h1>

  <!--
       1. This is the element we'll render our Ractive to.
  -->
  <div id='container'></div>

  <!--
       2. You can load a template in many ways. For convenience, we'll include it in
       a script tag so that we don't need to mess around with AJAX or multiline strings.
       Note that we've set the type attribute to 'text/ractive' - though it can be
       just about anything except 'text/javascript'
  -->
  <script id='template' type='text/ractive'>

    {{#each designQuestions}}
    <p><span>{{id}} </span> {{question}}</p>
        {{#each answers}}
          <label><input on-change='calc' type='radio' name='{{select}}' value='{{selected}}' >{{answer}} - {{price}}</label>
        {{/each}}
    {{/each}}
                       
    <table class="total">
        <tr>
            <td>Итого:</td>
            <td>{{sum}}</td>
        </tr>
    </table>                
  </script>

  <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

  <script>
      
    var ractive, designQuestions;  
      
    designQuestions = [
        { id: '1', 
          question: 'Какой дизайн вы предпочитаете?', 
          answers: [ 
              {answer:'уникальный и лично свой',price:222,selected:1},
              {answer:'у меня уже есть готовый дизайн',price:553,selected:2},
              {answer:'дизайн не нужен',price:22,selected:3},
              {answer:'купим тему на themeforest',price:442,selected:4}
            ],
          select:1
        },
        { id: '2', 
          question: 'есть ли у вас наработки по дизайну?', 
          answers: [ 
              {answer:'да, есть',price:22,selected:0},
              {answer:'нет, ничего нет',price:55,selected:1},
              {answer:'дизайн не нужен',price:0,selected:2},
              {answer:'еще крутой ответ',price:44,selected:3}
            ],
            select:1
        }
        
      ];
      
    
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: '#container',

      // We could pass in a string, but for the sake of convenience
      // we're passing the ID of the <script> tag above.
      template: '#template',

      // Here, we're passing in some initial data

        data: {
          designQuestions: designQuestions,
          sum:0
        },
         onrender:function(options)
        {
            var self = this;
            // proxy event handlers
            self.on(
            {
                calc: function (e)
                {
                    calc();
                }
            });

            calc();

            function calc()
            {
              var arrayLength = designQuestions.length;
                sum = 0;
                for (var i = 0; i < arrayLength; i++)
                {
                  var lengthans = designQuestions[i].answers.length;
                  for (var j = 0; j < lengthans; j++) {
                      if (designQuestions[i].answers[j].selected === designQuestions[i].select){
                           sum =  sum + designQuestions[i].answers[j].price;
                      }
                  }
                }
               self.set('sum',sum);
            }
        }
    });
  </script>
</body>
</html>

如何使用ra

1 个答案: