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

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

Мое понимание состоит в том, что, если у потребителя и поставщика есть атрибуты с данными, с переданным в нем выражением {{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>

источник

2015-02-07 Ryan The Leach

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

<!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

источник

2015-02-07 13:05:27 mudasobwa

О тех вниз стрелках (крадут сейчас)! :) –

@ JustinXL У меня есть знаменитая клавиатура с питанием от клавиатуры :) – mudasobwa

О, я неправильно прочитал документы, я думал, что привязка {{data}} к шаблону означает, что {{}} теперь ссылается на данные и {{data}} относятся к data.data –

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

ответ

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