0

パーソナライズされたスタイル設定を流星アプリ内で保持できるようにしようとしています。引数のために、オブジェクトの配列に値を保持しているとしましょう。各オブジェクトには「name」属性と「value」属性が含まれています。これらのオブジェクトを <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 は、スタイル タグ内のレンダリングに干渉する可能性があるマークアップでいくつかの特別なことを行います。

2つの解決策があります-

静的なスタイルを追加するだけの場合は、次のヘルパーを追加し、3 つの中括弧{{{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 に答える