如何将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代码