Как передать необходимые атрибуты для элемента конструктора

Question

я есть полимер пользовательский элемент, как этот

<script src="http://www.polymer-project.org/platform.js"></script> 
<script src="http://www.polymer-project.org/polymer.js"></script> 

<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript> 
    <template> 
     hello from {{options.name}} 
    </template> 
    <script> 
     Polymer({ 
     get options() { 
      return this.controller.options; 
     } 
     }); 
    </script> 
</polymer> 

<div id="container"></div> 

<script> 
    document.addEventListener('polymer-ready',function() { 
    var foo = new MyFoo(); 
    foo.controller = { 
     options : { 
      name : "here" 
     } 
    }; 
    document.body.appendChild(foo); 
    }); 
</script> 

атрибуте «контроллер», как ожидается, будет объект, имеющий свойство «варианты» от типа объекта.

Я могу создать экземпляр пользовательского элемента с помощью

var foo = new Foo(); 

, но я не смог установить атрибут «контроллер», который приводит к ошибке:

Uncaught TypeError: Cannot read property 'options' of undefined. 

Конечно - я мог бы изменить параметры геттера в полимерном компоненте должны быть безотказными:

... 
get options() { 
    return this.controller ? this.controller.options : null; 
} 
... 

Но a В этом случае пользовательский элемент не распознает прикладные данные.

Заключительный вопрос: Как передать необходимые атрибуты в конструктор пользовательских элементов?

Answer 1

Одним из решений является использование вычисленного свойством:

<script src="http://www.polymer-project.org/components/platform/platform.js"></script> 
 
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'> 
 

 
<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript> 
 
    <template> 
 
     hello from {{options.name}} 
 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     computed: { 
 
      options: 'controller.options' 
 
     } 
 
     }); 
 
    </script> 
 
</polymer-element> 
 

 
<script> 
 
    document.addEventListener('polymer-ready',function() { 
 
    var foo = new MyFoo(); 
 
    document.body.appendChild(foo); 
 
    foo.controller = { 
 
     options : { 
 
     name : "here" 
 
     } 
 
    } 
 
    }); 
 
</script>

Вы можете даже сделать вычисляемое свойство просто вызов метода. Главное, что, делая это таким образом, Полимер может сказать, когда нужно проверить, изменилось ли options, потому что оно знает входы, необходимые для вычисления options.

Polymer({ 
    computed: { 
    options: 'getOptions(controller)' 
    }, 
    getOptions: function(controller) { 
    return controller ? controller.options : null; 
    } 
});