ractive를 사용하여 여러 라디오의 총 가치를 계산하는 방법

ractive.js 루프 내에 여러 질문이 생성되었습니다. 각 질문마다 가격이 다른 여러 답변이 있습니다. 선택한 가격이 변경 될 때마다 총 가격을 계산하고 다시 계산해야합니다. 이 도움이 필요합니다. http://codepen.io/Nitoiti/pen/GjxXvo ractive를 사용하여 여러 라디오의 총 가치를 계산하는 방법

<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>

출처

2016-10-10 Eugene Musijenko

음 '내가 찾은 해결책 자신 :

나는이 codepen했다.

<!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>

출처

2016-10-20 11:39:03

ractive를 사용하여 여러 라디오의 총 가치를 계산하는 방법

답변

관련 문제