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
 }
});

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

1 个答案: