如何将Blaze模板与Meteor数据绑定

如何将Blaze模板与Meteor数据绑定,meteor,meteor-blaze,Meteor,Meteor Blaze,我有一些计算代码: 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

我有一些计算代码:

 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;
    };
     });
我还有
calculationdata
helper,它有一个包含计算结果的对象。 所以,我需要把这个放在我的火焰模板,我不知道如何

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

{{{带计算数据}
开挖边坡
区域基坑
区域地形
体积棱柱体
体积回流。
{{EXCSlopped.areaExPit}
垂直开挖
区域基坑
区域地形
体积棱柱体
体积回流。
墙面积
{{/与}}

您应该阅读上的文档。必须使用
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参数访问变量

查看有关的文档。您已经在模板对象上定义了函数
excslopped()
excvillative()
,这些函数应该设置为助手方法。将helper方法和ReactiveVar的get方法一起使用将使您的UI以反应方式更新,但它们也可以用于服务静态数据

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

同时显示您的
CalculationData
helper代码