1
- var widgets = require ( '@jupyter-widgets/base' ) ;
2
- var _ = require ( 'lodash' ) ;
1
+ import { DOMWidgetModel , DOMWidgetView } from '@jupyter-widgets/base' ;
3
2
4
3
// See example.py for the kernel counterpart to this file.
5
4
6
-
7
5
// Custom Model. Custom widgets models must at least provide default values
8
6
// for model attributes, including
9
7
//
@@ -18,38 +16,32 @@ var _ = require('lodash');
18
16
// when different from the base class.
19
17
20
18
// When serialiazing the entire widget state for embedding, only values that
21
- // differ from the defaults will be specified.
22
- var HelloModel = widgets . DOMWidgetModel . extend ( {
23
- defaults : _ . extend ( widgets . DOMWidgetModel . prototype . defaults ( ) , {
19
+ // differ from the defaults will be serialized.
20
+
21
+ export class HelloModel extends DOMWidgetModel {
22
+ defaults ( ) {
23
+ return {
24
+ ...super . defaults ( ) ,
24
25
_model_name : 'HelloModel' ,
25
26
_view_name : 'HelloView' ,
26
27
_model_module : '{{ cookiecutter.npm_package_name }}' ,
27
28
_view_module : '{{ cookiecutter.npm_package_name }}' ,
28
29
_model_module_version : '{{ cookiecutter.npm_package_version }}' ,
29
30
_view_module_version : '{{ cookiecutter.npm_package_version }}' ,
30
31
value : 'Hello World!'
31
- } )
32
- } ) ;
33
-
32
+ } ;
33
+ }
34
+ }
34
35
35
- // Custom View. Renders the widget model.
36
- var HelloView = widgets . DOMWidgetView . extend ( {
37
- // Defines how the widget gets rendered into the DOM
38
- render : function ( ) {
36
+ export class HelloView extends DOMWidgetView {
37
+ render ( ) {
39
38
this . value_changed ( ) ;
40
39
41
- // Observe changes in the value traitlet in Python, and define
42
- // a custom callback.
40
+ // Observe and act on future changes to the value attribute
43
41
this . model . on ( 'change:value' , this . value_changed , this ) ;
44
- } ,
42
+ }
45
43
46
- value_changed : function ( ) {
44
+ value_changed ( ) {
47
45
this . el . textContent = this . model . get ( 'value' ) ;
48
46
}
49
- } ) ;
50
-
51
-
52
- module . exports = {
53
- HelloModel : HelloModel ,
54
- HelloView : HelloView
55
- } ;
47
+ }
0 commit comments