如何绑定大火模板与流星数据

问题描述：

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>

显示你的'calculateData'辅助代码 – Styx

答

您应该阅读关于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 
} 
});

如何绑定大火模板与流星数据

相关推荐