在聚合物中觀察到的綁定按鈕

在Dart中使用聚合物我想觀察一個值並將按鈕綁定到改變它的函數。下面的示例代碼（test.dart）應該澄清什麼，我試圖做在聚合物中觀察到的綁定按鈕

import 'dart:html'; 
import 'package:polymer/polymer.dart'; 
import 'package:observe/observe.dart'; 
import 'package:mdv/mdv.dart' as mdv; 

class App extends Object with ObservableMixin { 
    int _counter = 0; 

    int get counter => _counter; 
    void set counter(int c) { 
    print("counter set to $c"); 
    int oldValue = _counter; 
    _counter = notifyPropertyChange(const Symbol('counter'), _counter, c); 
    } 

    increment(var event) { 
    print("increment"); 
    counter = counter + 1; 
    } 
} 

main() { 
    mdv.initialize(); 

    var app = new App(); 
    query("#tmpl1").model = app; 
}

使用這個HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
     <template id="tmpl1" bind> 
     <button on-click="increment">{{counter}}</button> 
     </template> 
    <script type="application/dart" src="test.dart"></script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

當按鈕被點擊的內部的增量我期望App類被調用，但沒有任何反應。我確信我忽略了一些簡單的東西，當然這一定是可能的。

注意運行示例代碼上面你不需要創建build.dart文件正在使用的任何自定義元素。

來源

2013-07-30 Lars Tackmann

看來，最新的SDK（0.6.13.0_r25630）打破了一些東西，來自飛鏢聚合物飛鏢示例的示例停止使用此更新。 – Lesiak

事實證明了我所要做到的，是可能的。得到它的工作，你需要包括在HTML以下

<script src="packages/polymer/boot.js"></script>

那麼下面的作品

<polymer-element name="x-app"> 
    <template> 
     <button on-click="increment">{{counter}}</button> 
    </template> 
    <script type="application/dart"> 
     import 'package:polymer/polymer.dart'; 

     @CustomTag('x-app') 
     class XApp extends PolymerElement with ObservableMixin { 
     @observable int counter = 0; 

     increment(event, detail, target) { 
      print("increment"); 
      counter++; 
      Observable.dirtyCheck(); 
     }  
     } 
    </script> 
    </polymer-element> 

    <x-app></x-app>

最重要的是它的工作原理，而不需要構建步驟（即沒有更多構建.dart）。

來源

2013-08-01 19:41:10

我剛剛閱讀了target10聚合物示例，我不確定您是否正在尋找我要發佈的解決方案。

得到目標10：聚合物例如從https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
插入<button on-click="increment">{{counter}}</button>任何地方插入的div之一xslambookform.html
插入xslambookform.dart

任何地方`

int _counter=0; 
    int get counter => _counter; 

    void set counter(int c) { 
    print("counter set to $c"); 
    int oldValue = _counter; 
    _counter = notifyPropertyChange(const Symbol('counter'), _counter, c); 
    } 

    void increment(var e, var detail, Element target) { 
    print("increment"); 
    counter = counter + 1; 
    }

運行slambook.html並按下按鈕。見控制檯：

增量

計數器設定爲1

增量

計數器設置爲2

來源

2013-07-30 15:16:26 Gero

感謝您的答案，但是這個示例接縫取決於build.dart。我的例子中沒有使用的東西。我在他們的印象下，只有在製作自定義元素時才需要外部構建。 –

在聚合物中觀察到的綁定按鈕

回答

相關問題