-
Notifications
You must be signed in to change notification settings - Fork 949
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Minor tweaks to the custom widget tutorial
- Loading branch information
Showing
1 changed file
with
9 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -370,8 +370,7 @@ | |
"The TypeScript cookiecutter generates a file `src/widget.ts`. Open the file and rename `ExampleModel` to `EmailModel` and `ExampleView` to `EmailView`:\n", | ||
"\n", | ||
"```typescript\n", | ||
"export\n", | ||
"class EmailModel extends DOMWidgetModel {\n", | ||
"export class EmailModel extends DOMWidgetModel {\n", | ||
" defaults() {\n", | ||
" return {...super.defaults(),\n", | ||
" _model_name: EmailModel.model_name,\n", | ||
|
@@ -392,14 +391,13 @@ | |
" static model_name = 'EmailModel';\n", | ||
" static model_module = MODULE_NAME;\n", | ||
" static model_module_version = MODULE_VERSION;\n", | ||
" static view_name = 'EmailView'; // Set to null if no view\n", | ||
" static view_module = MODULE_NAME; // Set to null if no view\n", | ||
" static view_name = 'EmailView';\n", | ||
" static view_module = MODULE_NAME;\n", | ||
" static view_module_version = MODULE_VERSION;\n", | ||
"}\n", | ||
"\n", | ||
"\n", | ||
"export\n", | ||
"class EmailView extends DOMWidgetView {\n", | ||
"export class EmailView extends DOMWidgetView {\n", | ||
" render() {\n", | ||
" this.el.classList.add('custom-widget');\n", | ||
"\n", | ||
|
@@ -445,7 +443,7 @@ | |
"Then, add the following logic for the `render` method:\n", | ||
"\n", | ||
"```typescript\n", | ||
"render: function() { \n", | ||
"render() { \n", | ||
" this._emailInput = document.createElement('input');\n", | ||
" this._emailInput.type = 'email';\n", | ||
" this._emailInput.value = '[email protected]';\n", | ||
|
@@ -501,7 +499,7 @@ | |
"cell_type": "markdown", | ||
"metadata": {}, | ||
"source": [ | ||
"We want to be able to avoid user to write an invalid email address, so we need a validator using traitlets.\n", | ||
"We want to be able to avoid the user to write an invalid email address, so we need a validator using traitlets.\n", | ||
"\n", | ||
"```python\n", | ||
"from ipywidgets import DOMWidget, ValueWidget, register\n", | ||
|
@@ -570,8 +568,7 @@ | |
"By replacing the string literal with a call to `model.get`, the view will now display the value of the back end upon display. However, it will not update itself to a new value when the value changes.\n", | ||
"\n", | ||
"```typescript\n", | ||
"export\n", | ||
"class EmailView extends DOMWidgetView {\n", | ||
"export class EmailView extends DOMWidgetView {\n", | ||
" render() {\n", | ||
" this._emailInput = document.createElement('input');\n", | ||
" this._emailInput.type = 'email';\n", | ||
|
@@ -604,8 +601,7 @@ | |
"To get the view to update itself dynamically, register a function to update the view's value when the model's `value` property changes. This can be done using the `model.on` method. The `on` method takes three parameters, an event name, callback handle, and callback context. The Backbone event named `change` will fire whenever the model changes. By appending `:value` to it, you tell Backbone to only listen to the change event of the `value` property (as seen below).\n", | ||
"\n", | ||
"```typescript\n", | ||
"export\n", | ||
"class EmailView extends DOMWidgetView {\n", | ||
"export class EmailView extends DOMWidgetView {\n", | ||
" render() {\n", | ||
" this._emailInput = document.createElement('input');\n", | ||
" this._emailInput.type = 'email';\n", | ||
|
@@ -639,8 +635,7 @@ | |
"This allows us to update the value from the Python kernel to the views. Now to get the value updated from the front-end to the Python kernel (when the input is not disabled) we can do it using the `model.set` method.\n", | ||
"\n", | ||
"```typescript\n", | ||
"export\n", | ||
"class EmailView extends DOMWidgetView {\n", | ||
"export class EmailView extends DOMWidgetView {\n", | ||
" render() {\n", | ||
" this._emailInput = document.createElement('input');\n", | ||
" this._emailInput.type = 'email';\n", | ||
|