带有可变来源的流星显示图像

meteor display image with variable source

本文关键字：流星 显示 显示图 图像      更新时间：2023-09-26

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

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

<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);
  }
});
表单项使用以下模板

显示，该模板输出在表单中输入的"变量"：

<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 变量混合到模板代码中的图像文件源中？

希望这是有道理的！

我不知道

我是否正确，但是如果您想根据国家/地区更改图像（旗帜），请尝试以下操作：

构建一个模板帮助程序"前缀"，用于输出当前国家/地区前缀。

前缀帮助程序：

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>
相关文章：