传递动态数据属性来内容块在流星

我在火焰为button s的一个动态模板，如下所示（简化）：传递动态数据属性来内容块在流星

button.html

<template name="Button"> 
    <button {{attributes}}> 
    <span class="button__text">{{> UI.contentBlock}}</span> 
    </button> 
</template>

button.js

import {Template} from 'meteor/templating'; 
import cx from 'classnames'; 

import './button.html'; 

Template.Button.helpers({ 
    attributes() { 
    const instance = Template.instance(); 
    let {data} = instance; 

    return { 
     disabled: data.disabled, 
     'class': cx('button', data.class) 
    }; 
    } 
});

尝试设置动态数据属性：

{{#Button class="js-add-contact" data-phase-index={{index}}}}Add Contact{{/Button}}

的index这种插入（假设它只是一个简单的，动态的字符串）到data-phase-index抛出一个错误：内容分块没想到的{{。我不确定另一种将动态数据导入模板的方法。还有在attributes()助手中获取Button识别的data-属性的问题。任何人都可以清除它？

来源

2016-09-14 chazsolo

你能不能把'index'的值转换成一个帮手，并在ATTR'数据相指数= getIndex'参考呢？这在'Template.dynamic'中适用于我。 – CodeMonkey

@CodeMonkey感谢输入，索引实际上是一个帮手，我只是犯了一个愚蠢的错误！ – chazsolo

只需data-phase-index=index应该工作。

既然你已经是双花括号内为您Button调用模板，流星知道它会得到解释值。例如，看到你必须在class="js-add-contact"的字符串周围使用引号。

像往常一样，将流星尝试从助手解释index，或从数据上下文。

来源

2016-09-15 02:39:44 ghybs

简直不敢相信！绝对解决了抛出的错误。然而，我的问题的第二部分仍然困扰着我 - 当试图访问数据属性时，即使使用您的方法，他们也会回到'未定义'。如果我在单击按钮时使用console.log event.target.dataset，它会打印DOMStringMap {}' – chazsolo

啊，不要紧，它是'button__text'引发的事件，它没有任何属性。感谢帮助！ – chazsolo

yw :-)感谢您的反馈。我很高兴你解决了你的问题的第二部分。 – ghybs

传递动态数据属性来内容块在流星

回答

相关问题