Пример проблем с привязкой данных Simple Polymer (0.5.4)

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

Насколько я понимаю, если у потребителя и поставщика есть атрибуты с данными, с переданным выражением {{stuff}}, это относится к переменной «stuff» в области действия элемента.

Когда поставщик загружен и готов, он должен заполнить переменную stuff, чтобы потребитель вставил данные.

http://jsbin.com/yawipodayo/1/edit?html,css,js,output

<!doctype html>
<html>
<head>
    <script src="../bower_components/webcomponentsjs/webcomponents.js">
    </script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
    <polymer-element name="consumer" attributes="data">
        <template bind="{{data}}">{{}}</template>
    </polymer-element>
    <polymer-element name="supplier" attributes="data">
        <template></template>
        <script>
        Polymer('supplier', {
            ready: function(){
                this.data = "test"
            }
        });
        </script>
    </polymer-element>
    <polymer-element name = "root">
        <template>
            <supplier data="{{stuff}}"></supplier>
            <consumer data="{{stuff}}"></consumer>
        </template>
    </polymer-element>
    <root>
    </root>
</body>
</html>

web-component polymer
person Ryan The Leach    schedule 07.02.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

У вас есть количество сбоев в вашем коде. Я оставлю комментарии вокруг проблем, которые нужно исправить:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!--  noscript tags are mandatory for elements not having script declared -->
                                                <!--  ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
         <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
    <template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
                 <!--  ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓  -->        
<polymer-element name="my-supplier" attributes="data">
    <template></template>
    <script>
      // As of 0.5 you don’t need to specify name in script
      //    ⇓⇓⇓⇓
      Polymer({
        ready: function(){
            this.data = "test"
        }
    });
    </script>
</polymer-element>
<polymer-element name = "my-root" noscript>
    <template>
        <my-supplier data="{{stuff}}"></my-supplier>
        <my-consumer data="{{stuff}}"></my-consumer>
    </template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>

Исправленная версия работает должным образом: http://jsbin.com/zewimobaro/1/edit.

person Aleksei Matiushkin    schedule 07.02.2015
comment
Ох уж эти стрелки вниз (воруют сейчас)! :) - person Justin XL; 07.02.2015
comment
@JustinXL У меня есть знаменитая клавиатура Powered-By-Arrows™ :) - person Aleksei Matiushkin; 07.02.2015
comment
О, я неправильно прочитал документы, я думал, что привязка {{data}} к шаблону означает, что {{}} теперь ссылается на данные, а {{data}} будет ссылаться на data.data - person Ryan The Leach; 07.02.2015
comment
@RyanTheLeach был рад помочь. - person Aleksei Matiushkin; 07.02.2015