流星渲染样式块模板中的每个项目

我试图让个性化样式设置在流星应用程序中保留。为了争论起见，我们可以说我将值保存在一个对象数组中，每个对象都包含一个“名称”和“值”属性。当我尝试在<样式块中渲染这些对象时，Meteor会渲染一个。评论
以下是我简单的概念验证：流星渲染样式块模板中的每个项目

poc.html：

<head>                 
<title>poc</title>              
</head>                                   
<body>                 
    {{> hello}}               
</body>                                   
<template name="hello">             
<h1>Hello World!</h1>             
Styles don't render here:            
<style>                 
    body {background-color: #999;}          
    {{#each styles}}              
    .{{name}} { {{value}} }            
    {{/each}}               
</style>                 

Styles render here:             
<ul>                 
    {{#each styles}}             
    <li class="{{name}}">{{name}} : {{value}}</li>      
    {{/each}}               
</ul>                 
And here:                
<div>                 
    {{#each styles}}             
    .{{name}} { {{value}} } <br/>          
    {{/each}}               
</div>

poc.js：

在样式块的输出包含：

<!--data:DuvxkGSiN6BK3M95T--><!--data:GvvkPYg2Adii4NNre-->

，而不是预期：

style1: { color: #000} 
style2: { color: #fff}

不知道这是由设计或设计错误或我的理解错误。提前致谢。

来源

2013-09-30 Law Metzler

流星做了一些特殊的事情，可能会干扰样式标记内的渲染标记。

有两种解决方案 -

如果你只需要添加静态风格，添加下面的助手，并使其有三个括号{{{styleBlock styles}}}作为一个单独的元素：如果您需要

Template.hello.styleBlock = function(styles){ 
    content = "<style>"; 
    _.each(styles, function(style){ 
    content += '.' + style.name + '{' + style.value + '}'; 
    }); 
    content += "</style>"; 
    return content; 
};

或者动态地添加样式，你可以设置一个观察发现样式表，并呼吁“insertRule”

var styleSheet = _.find(document.styleSheets, 
     function(sheet){return sheet.ownerNode.getAttribute("id") == 'dynamic-styles';} 
    ); 
    styleSheet.insertRule('.style1{color: #000}', 0);

来源

2013-10-02 00:48:21

它已经证实，流星不会呈现内部样式标签正确（https://github.com/meteor/meteor/issues/1460）。由于这些是被动的，我不确定第二个选项的效果如何，因为我有时需要删除这些选项。 –

您需要跟踪规则索引，使用deleteRule将其删除。您也可以刷新并重新添加删除规则。真的，虽然 - 使整个元素可能效果最好。 –

目前，我只是在模板函数中渲染整个样式标签并返回。 –

流星渲染样式块模板中的每个项目

回答

相关问题