метеор рендеринга каждый элемент внутри шаблона стиля шаблона

Я пытаюсь разрешить настройку персонализированного стиля в приложении метеорита. Для аргумента, скажем, я сохраняю значения в массиве объектов, каждый объект, содержащий атрибут «имя» и «значение». Когда я пытаюсь сделать эти объекты внутри блока < >, 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}

Не уверен, если это дизайн или ошибка или ошибка в моем понимании. Заранее спасибо.

источник

2013-09-30 Law Metzler

Метеор делает некоторые специальные вещи с разметкой, которые могут мешать рендерингу внутри тега стиля.

Есть два Solutions-

если вам просто нужно добавить статические стили, добавьте следующий помощник и сделать его с тремя скобками {{{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, чтобы удалить их. Вы также можете сбросить и повторно добавить правила удаления. На самом деле, хотя рендеринг всего элемента, вероятно, будет работать лучше всего. –

В то время я просто передаю весь тег стиля в функциях шаблона и возвращаю его. –

метеор рендеринга каждый элемент внутри шаблона стиля шаблона

ответ

Смежные вопросы