KnockoutScript行和

时间:2012-03-14 13:08:54

标签: knockout.js

我使用knockoutscripts来更新所有行元素。 你知道下面的代码有什么问题吗,它没有给出行总和。任何帮助都会有所帮助。目前,问题是我无法看到rowsum和grandTotal。

<script src="../../Scripts/knockout-2.0.0.js"    type="text/javascript"></script>  <script language="javascript"    type="text/javascript">
      $(document).ready(function () {
          var rowLine = function () {
              var self = this;
              self.Day1Hrs = ko.observable();
              self.Day2Hrs = ko.observable();
              self.totalrow = ko.computed(function () {
                  return self.totalrow ? parseInt(self.Day1Hrs + self.Day2Hrs) : 0;
              });
          };
          self.addLine = function () { self.lines.push(new rowLine()); };
          self.removeLine = function (line) { self.lines.remove(line); };


          var row = function () {
              var self = this;
              self.lines = ko.observableArray([new rowLine()]);
              self.grandTotal = ko.computed(function () {
                  var total = 0;
                  $.each(self.lines(), function () {
                      total += this.totalrow();
                  });
                  return total;
              });

          };

          ko.applyBindings(row());


      });
      </script>
      <table>
      <thead><tr>
                 <th class="Day1Hrs">Day1</th>
                 <th class="Day2Hrs" >Day2</th>
                 <th class="totalrow">Row Total</th>
                 <th>Delete</th>
             </tr>
      </thead>
      <tbody data-bind='foreach: lines'>

-     <tr>
               <td>
                   <input class="Day1Hrs" data-bind='value:Day1Hrs,      valueUpdate:"afterkeydown"'/>
               </td>
               <td>
                   <input class="Day2Hrs" data-bind='value:Day2Hrs, valueUpdate:"afterkeydown"'/>
               </td>
               <td  class="totalrow">
                   <span data-bind:'text: totalrow'></span>
               </td>
               <td>
                   <button data-bind='click: removeLine'>Remove Line</button>
               </td>
           </tr>


      </tbody>
      <tfoot></tfoot>
      </table>     <p class="grandTotal">Total <span data-bind='text:grandTotal'/></p>     <button    data-bind='click:addLine'>Add Line</button>

1 个答案:

答案 0 :(得分:0)

jsFiddle会很有用,但只需扫描代码就可能出现以下问题:

          self.Day1Hrs = ko.observable();
          self.Day2Hrs = ko.observable();

          self.totalrow = ko.computed(function () {
              return self.totalrow ? parseInt(self.Day1Hrs + self.Day2Hrs) : 0;
          });

您的observable被初始化为null,并且您没有正确获取它们的值。

相反,请尝试:

          self.Day1Hrs = ko.observable(0);
          self.Day2Hrs = ko.observable(0);

          self.totalrow = ko.computed(function () {
              return self.Day1Hrs() + self.Day2Hrs();
          });