Question

我正在使用meteor.js并使用简单的应用程序。我的页面上有一个表单，一旦提交，数据就会插入到数据库中。我在页面左侧有一个“提要”数据，当提交数据库中的新条目时，它会更新，显示数据。这是目前关于国家和人口等的基本数据。我的问题是如何混合一个js变量来改变这个'feed'中加载的图像文件的来源 - 希望在下面解释。

所以，在代码中，我有这个：

<template name="mainLeftCol">
    <div class="col-sm-5">
        {{> form}}
    </div>
</template>

<template name="mainBody">
    {{> mainLeftCol}}

    <div class="col-sm-7">
        {{#each dbEntry}}
            {{> formItem}}
        {{/each}}
    </div>
</template>

在js文件中我有提交表单时的事件代码：

Template.mainLeftCol.events({
  'submit form': function(e) {
    e.preventDefault()

    var country = $(e.target).find('[id=country]').val()
    prefix = country.slice(0,3);

    if (prefix === 'Eng') {
      console.log("Eng is for England");
    } 

    var spot = {
      country: country,
      continent: $(e.target).find('[id=continent]').val(),
    };

    spot._id = Spots.insert(spot);
  }
});

使用以下模板显示formItems，该模板输出以下列形式输入的“变量”：

<template name="formItem">
{{#Animate}}
    <div class="panel panel-default spot animate">
      <div class="panel-heading">
        <h5 class="pull-right">{{country}}</h5>
        <h4><mark><b>{{continent}}</b></mark></h4>
      </div>
      <div class="panel-body">
        <img src="Eng.png" class="img-circle pull-right"> 
      </div>
    </div>
{{/Animate}}
</template>

正如您在此模板中看到的，我已将硬编码“Eng.png”作为图像的来源。我想要做的是基于前缀变量切片国家/地区字段是让模板根据模板上的国家/地区显示不同的图像（它们是标记）。

如何将我的事件代码中的JS变量混合到模板代码中的图像文件源中？

希望这是有道理的！

Answer 1

我不知道我是否正确，但如果你想根据国家改变图像（旗帜）尝试这样的事情：

构建模板助手＆＃34;前缀＆＃34;它输出当前的国家/地区前缀。

前缀助手：

Template.formItem.helpers({
     countryPrefix: function () {

        var country = $(e.target).find('[id=country]').val()
        return country.slice(0,3);

    }
});

在您的模板中，您现在可以：

<div class="panel-body">
    <img src="{{countryPrefix}}.png" class="img-circle pull-right"> 
</div>

具有可变源的流星显示图像

1 个答案: