2014-09-01 3 views
0

Тематика вопроса немного неоднозначна. У меня есть основной файл входа для загрузки (entry.html), который использует сценарий entry.dart. В entry.html я использую пользовательский карточный стол с полимерным элементом. cardtable.html - простой список. Когда я загружаю first.html в первый раз, все хорошо .. Я вижу несколько строк текста, напечатанных со статическими данными в моем списке моделей. У моей entry.html есть кнопка, щелкнув, которая меняет модель данных (через entry.dart, я вызываю файл cardtable.dart). Я вижу, что правильные методы вызываются, и изменение модели данных подтверждается, но пользовательский интерфейс не обновляется.Databinding не работает в Polymer Dart

entry.html

<link rel="import" href="cardtable.html"> 
<link rel="import" href="packages/paper_elements/paper_button.html"> 
<script async src="packages/browser/dart.js"></script> 
<script async type="application/dart" src="entry.dart"></script> 

<link rel="stylesheet" href="entry.css"> 
    </head> 
    <body> 
    <paper-button id="inc_btn" label="+" raisedButton></paper-button> 
    <paper-button id="dec_btn" label="-" raisedButton></paper-button> 
<card-table></card-table> 
    </body> 

entry.dart

var tablec; 
void main() { 

    initPolymer().run(() { 
    Polymer.onReady.then((_) { 
     tablec = new Element.tag('card-table'); 
     var incBtn = querySelector('#inc_btn'); 
     incBtn.onClick.listen(increment); 
    }); 
} 

void increment(Event e) { 
    new Future(() { 
     tablec.increment(); 
    }); 
} 
} 

карты table.html

<link rel="import" href="packages/polymer/polymer.html"> 
<polymer-element name="card-table"> 
<template> 
    <style> 
    :host { 
     display: block; 
     color: green; 
    } 
    </style> 
    <content> 
    <div id="dynamic_area"> 
     <template repeat="{{item in list}}"> 
     <span>ABCD : {{item}}</span> 
     </template> 
     </div> 
    </content> 
</template> 

<script type="application/dart" src="cardtable.dart"></script> 

</polymer-element> 

cardtable.dart

@CustomTag('card-table') 
class CardTable extends PolymerElement { 

    @observable List list = toObservable(['a', 'b', 'c']); 

    CardTable.created() : super.created() { 
    polymerCreated(); 
    } 

    void increment() { 
    print('INCREMENT'); //is called on clicking + button on entry.html 
    list.add('d'); 
    } 

} 

ответ

0

Вы называете приращение на новом <card-table> вы ссылку, используя переменную, а не один внутри вашего <body> тега.

Вместо

tablec = new Element.tag('card-table'); 

использовании Используйте

tablec = querySelector('card-table'); 
Смежные вопросы