如何綁定大火模板與流星數據

Question

我有一些計算代碼：

Template.smartoptimizer.onCreated(function() { 
    this.currentSelector = new ReactiveVar({}); 
    this.ready = new ReactiveVar(false); 
    this.length = new ReactiveVar(31.8); 
    this.width = new ReactiveVar(48.3); 
    this.height = new ReactiveVar(3.38); 
    this.area = new ReactiveVar((31.8 + 2*0.6)*(48.3 + 2*0.6)); 

    this.workingSpace = new ReactiveVar(0.60); 
    this.slopeAngle = new ReactiveVar('1:1'); 

    this.excSloped = function() { 
     let data = {}; 
     data.areaExPit = (this.length + 2*this.workingSpace)*(this.width + 2*this.workingSpace); 
     data.areaTerrain = (this.length + 2*this.workingSpace + 2*this.width)*(this.width + 2*this.workingSpace + 2*this.width); 
     data.volumePrism = this.height/3 * (data.areaExPit + Math.sqrt(data.excSloped*data.areaTerrain) + data.areaTerrain); 
     data.volumeBackf = data.volumePrism - (this.height*this.length*this.width); 
     return data; 
    }; 

    this.excVertical = function() { 
     let data = {}; 
     data.areaExPit = (this.length + 2*this.workingSpace)*(this.width + 2*this.workingSpace); 
     data.areaTerrain = (this.length + 2*this.workingSpace)*(this.width + 2*this.workingSpace); 
     data.volumePrism = ((data.areaExPit*data.areaTerrain)/2) * 5; 
     data.volumeBackf = data.volumePrism - (this.height*this.length*this.width); 
     data.wallArea = this.height*(this.length + 2*this.workingSpace) + 2*(this.width + 2*this.workingSpace); 
     return data; 
    }; 
    }); 

我也有calculationsData幫手有與該計算結果的對象。 所以，我需要把這個放在我的Blaze模板中，我不知道如何。

<template name="smartoptimizer"> 
    <div class="row"> 
     {{#with calculationsData}} 
      <div class="col s4"> 
         <h4>excavation sloped</h4> 
         <table class="bordered striped calculations-table" width="100%"> 
          <tbody> 
          <tr> 
           <td>area excavation pit</td> 
           <td>area terrain</td> 
           <td>volume Prismatoid</td> 
           <td>volume backf.</td> 
          </tr> 
          <tr> 
           <td>{{excSloped.areaExPit}}</td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          </tbody> 
         </table> 
       </div> 
       <div class="col s4"> 
         <h4>excavation vertical</h4> 
         <table class="bordered striped calculations-table" width="100%"> 
          <tbody> 
          <tr> 
           <td>area excavation pit</td> 
           <td>area terrain</td> 
           <td>volume Prismatoid</td> 
           <td>volume backf.</td> 
           <td>wall area</td> 
          </tr> 
          <tr> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
           <td></td> 
          </tr> 
          </tbody> 
         </table> 
       </div> 
     {{/with}} 
    </div> 
</template> 

Answer 1

您應該閱讀關於ReactiveVar的文檔。您必須使用this.workingSpace.get()/this.workingSpace.set(someValue)方法來訪問該屬性的值。做(this.length + 2*this.workingSpace)將無法​​按預期工作，你實際上試圖乘以ReactiveVar對象2.

使用ReactiveVar是沒有必要的，除非我錯過了一些上下文。如果這些屬性的值可能會更改，並且您希望在發生這些更改時更新UI，請將它們保留爲ReactiveVars。否則，只需使用模板範圍的變量。在onCreated/onRendered方法中，this.someVariable允許您通過幫助程序方法中的Template.instance().someVariable並通過傳遞給事件處理程序的templateInstance參數來訪問變量。

查看關於Helper Methods的文檔。您已經在模板對象上定義了函數excSloped()和excVertical()，應將這些函數設置爲輔助方法。使用ReactiveVar的get方法使用助手方法會使你的UI更新成爲被動方式，但它們也可以用來提供靜態數據。

Template.smartoptimizer.helpers({ 
excSloped() { 
    // code here 
}, 
excVertical() { 
    // code here 
} 
});