{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets.widgets as widgets\n",
    "from traitlets import Unicode, List, Instance\n",
    "from IPython.display import display\n",
    "\n",
    "\n",
    "class Sub(widgets.DOMWidget):\n",
    "    _view_name = Unicode('SubView').tag(sync=True)\n",
    "    _view_module = Unicode('test').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.1.0').tag(sync=True)\n",
    "\n",
    "\n",
    "class Test(widgets.DOMWidget):\n",
    "    _view_name = Unicode('TestView').tag(sync=True)\n",
    "    _model_name = Unicode('TestModel').tag(sync=True)\n",
    "    _model_module = Unicode('test').tag(sync=True)\n",
    "    _view_module = Unicode('test').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.1.0').tag(sync=True)\n",
    "    children = List(Instance(widgets.Widget)).tag(sync=True, **widgets.widget_serialization)\n",
    "\n",
    "    def __init__(self, subs):\n",
    "        super().__init__()\n",
    "        self.children = subs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.undef('test');\n",
       "\n",
       "define('test', [\"@jupyter-widgets/base\", \"underscore\"], function(widgets, _) {\n",
       "    var uuid = widgets.uuid\n",
       "\n",
       "    var SubView = widgets.DOMWidgetView.extend({\n",
       "\n",
       "        initialize: function() {\n",
       "            console.log('init SubView');\n",
       "            SubView.__super__.initialize.apply(this, arguments);\n",
       "        },\n",
       "\n",
       "        render: function() {\n",
       "            SubView.__super__.render.apply(this, arguments);\n",
       "            this.el.textContent = \"subview rendering\";\n",
       "        },\n",
       "\n",
       "    });\n",
       "\n",
       "    var TestView = widgets.DOMWidgetView.extend({\n",
       "\n",
       "        initialize: function() {\n",
       "            console.log('init TestView');\n",
       "            TestView.__super__.initialize.apply(this, arguments);\n",
       "            this.views = new widgets.ViewList(this.add_view, null, this);\n",
       "            this.listenTo(this.model, 'change:children', function(model, value) {\n",
       "                this.views.update(value);\n",
       "            }, this);\n",
       "            console.log('init TestView complete');\n",
       "        },\n",
       "\n",
       "        add_view: function (child_model) {\n",
       "            // error occurs on this line:\n",
       "            return this.create_child_view(child_model)\n",
       "        },\n",
       "\n",
       "        render: function() {\n",
       "            TestView.__super__.render.apply(this, arguments);\n",
       "            this.views.update(this.model.get('children'));\n",
       "            this.el.textContent = 'rendered test_view'\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    var TestModel = widgets.DOMWidgetModel.extend({}, {\n",
       "        serializers: _.extend({\n",
       "            children: { deserialize: widgets.unpack_models }\n",
       "        }, widgets.WidgetModel.serializers)\n",
       "    })\n",
       "\n",
       "    return {\n",
       "        SubView : SubView,\n",
       "        TestView : TestView,\n",
       "        TestModel: TestModel\n",
       "    };\n",
       "\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.undef('test');\n",
    "\n",
    "define('test', [\"@jupyter-widgets/base\", \"underscore\"], function(widgets, _) {\n",
    "    var uuid = widgets.uuid\n",
    "\n",
    "    var SubView = widgets.DOMWidgetView.extend({\n",
    "\n",
    "        initialize: function() {\n",
    "            console.log('init SubView');\n",
    "            SubView.__super__.initialize.apply(this, arguments);\n",
    "        },\n",
    "\n",
    "        render: function() {\n",
    "            SubView.__super__.render.apply(this, arguments);\n",
    "            this.el.textContent = \"subview rendering\";\n",
    "        },\n",
    "\n",
    "    });\n",
    "\n",
    "    var TestView = widgets.DOMWidgetView.extend({\n",
    "\n",
    "        initialize: function() {\n",
    "            console.log('init TestView');\n",
    "            TestView.__super__.initialize.apply(this, arguments);\n",
    "            this.views = new widgets.ViewList(this.add_view, null, this);\n",
    "            this.listenTo(this.model, 'change:children', function(model, value) {\n",
    "                this.views.update(value);\n",
    "            }, this);\n",
    "            console.log('init TestView complete');\n",
    "        },\n",
    "\n",
    "        add_view: function (child_model) {\n",
    "            // error occurs on this line:\n",
    "            return this.create_child_view(child_model)\n",
    "        },\n",
    "\n",
    "        render: function() {\n",
    "            TestView.__super__.render.apply(this, arguments);\n",
    "            this.views.update(this.model.get('children'));\n",
    "            this.el.textContent = 'rendered test_view'\n",
    "        },\n",
    "    });\n",
    "    \n",
    "    var TestModel = widgets.DOMWidgetModel.extend({}, {\n",
    "        serializers: _.extend({\n",
    "            children: { deserialize: widgets.unpack_models }\n",
    "        }, widgets.DOMWidgetModel.serializers)\n",
    "    })\n",
    "\n",
    "    return {\n",
    "        SubView : SubView,\n",
    "        TestView : TestView,\n",
    "        TestModel: TestModel\n",
    "    };\n",
    "\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "models=[Sub() for _ in range(4)]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1f03ebd7660247dab40fd0beae331fc4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Test(children=[Sub(), Sub(), Sub(), Sub()])"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "t=Test(models)\n",
    "t"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python [conda env:Python3]",
   "language": "python",
   "name": "conda-env-Python3-py"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}