无法从文本框(可能是 NAN）输出值的乘法 - 主干.js

Unable to output multiplication of values from textboxes (possibly NAN) - Backbone.js

本文关键字：输出 js 主干文本 NAN 更新时间：2023-09-26

我试图理解Backbone.js以及它是如何工作的。我创建了两个接受任何值的文本框，然后单击按钮（Multipy）时，值显示在下面的框中，这有效，但我希望两个值的乘法显示在第三个框中 - 我试图将这两个值分配给变量并乘法，但它似乎不起作用。我认为返回的有一些问题文本框中的值，认为它是 NAN。无论如何，请看一看并提出建议。我已经注释掉了不起作用的代码。实时网址： http://egoless.co.uk/learning/learn_backbone/first-backbone-app.php

  <!DOCTYPE html>
  <html>
    <head>
    <title>Testing</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="underscore.js">
  </script><script type="text/javascript" src="backbone.js"></script>
  <style>
  .size {
    width: 100px;
    height: 30px;
    border: solid 1px red;
    float: left;
    margin-left: 10px;
    text-align: center;
    font-weight: bold;
  }
  </style>
    </head>
    <body>
    <input type="text" id="box1" />
  &nbsp;
  <input type="text" id="box2" />
  &nbsp;
  <button id="myBtn">Multiply</button>
  <br>
  <br>
  <div id="myBox" class="size"></div>
  <div id="myBox2" class="size"></div>
  <div id="myBox3" class="size"></div>
  <script>
  (function($){
  //defining model 1
    PersonModel1 = Backbone.Model.extend({
      defaults:{
              age : function(){
               return  $("input#box1").val();
              }
          }
    });
    myPerson1 = new PersonModel1();
    //defining model 2
    PersonModel2 = Backbone.Model.extend({
      defaults:{
              age : function(){
               return $("input#box2").val();
              }
      }
    });
    myPerson2 = new PersonModel2();
    //defining collection

    Group = Backbone.Collection.extend({
          Model: PersonModel1,
          Model: PersonModel2,
          url:"#"
      })
          People = new Group([]);
          People.add(myPerson1);
          People.add(myPerson2);  
    //adding view
    ResultView = Backbone.View.extend({
          el:'button',
          events:{
              'click':'render'
          },
        render:function(){
          val1 = myPerson1.get('age');
          val2 = myPerson2.get('age')
          val3 = val1*val2 // not working
          $('div#myBox').html(val1);
          $('div#myBox2').html(val2);
          $('div#myBox3').html(val3); // not working
          $('input#box1').val("");
          $('input#box2').val("");
          return this;
          }
      })


    $(document).ready(function(e) {
       myResultView = new ResultView();
    });
  })(jQuery);
  </script>
  </body>
  </html>

在模型定义的默认值部分中，您只能为属性赋值。要返回值年龄，您应该编写单独的函数。

          defaults:{},
          age : function(){
           return  $("input#box1").val();
          }

你可以这样打电话

      val1 = myPerson1.age();
      val2 = myPerson2.age();
      val3 = val1*val2 ;