Question

我正在尝试允许在流星应用程序中保留个性化样式设置。为了论证，我们假设我将值保存在一个对象数组中，每个对象都包含一个“name”和“value”属性。当我尝试在＆lt; style＆gt;块中渲染这些对象时，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：

   if (Meteor.isClient) {                                                  
     Template.hello.styles= function() {                                   
                 var resultArray=[];                                       
                 resultArray.push( { name: 'style1', value:'color: #000'}) 
                 resultArray.push( { name: 'style2', value:'color: #fff'}) 
                 return resultArray;                                       
            }                                                             
    }

样式块中的输出包含：

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

而不是预期的：

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

不确定这是出于设计还是我理解中的错误或错误。提前谢谢。

Answer 1

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

有两种解决方案 -

如果您只需要添加静态样式，请添加以下帮助程序并使用三个大括号{{{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);

流星渲染每个样式在样式块模板中

1 个答案: