0

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

不确定这是设计使然，还是错误或我理解的错误。提前致谢。

4

1 回答 1

0

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);
于 2013-10-02T00:48:21.210 回答