{"action":"created","issue":{"url":"https://api.github.com/repos/winjs/winjs/issues/1425","labels_url":"https://api.github.com/repos/winjs/winjs/issues/1425/labels{/name}","comments_url":"https://api.github.com/repos/winjs/winjs/issues/1425/comments","events_url":"https://api.github.com/repos/winjs/winjs/issues/1425/events","html_url":"https://github.com/winjs/winjs/issues/1425","id":103974863,"number":1425,"title":"WinJS controls are not instantiated when using WinJS.UI.Hub with WinJS.UI.Pages for sections","user":{"login":"pke","id":164625,"avatar_url":"https://avatars.githubusercontent.com/u/164625?v=3","gravatar_id":"","url":"https://api.github.com/users/pke","html_url":"https://github.com/pke","followers_url":"https://api.github.com/users/pke/followers","following_url":"https://api.github.com/users/pke/following{/other_user}","gists_url":"https://api.github.com/users/pke/gists{/gist_id}","starred_url":"https://api.github.com/users/pke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pke/subscriptions","organizations_url":"https://api.github.com/users/pke/orgs","repos_url":"https://api.github.com/users/pke/repos","events_url":"https://api.github.com/users/pke/events{/privacy}","received_events_url":"https://api.github.com/users/pke/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/winjs/winjs/labels/.kind:%20question","name":".kind: question","color":"c7def8"}],"state":"open","locked":false,"assignee":{"login":"jseanxu","id":6741017,"avatar_url":"https://avatars.githubusercontent.com/u/6741017?v=3","gravatar_id":"","url":"https://api.github.com/users/jseanxu","html_url":"https://github.com/jseanxu","followers_url":"https://api.github.com/users/jseanxu/followers","following_url":"https://api.github.com/users/jseanxu/following{/other_user}","gists_url":"https://api.github.com/users/jseanxu/gists{/gist_id}","starred_url":"https://api.github.com/users/jseanxu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jseanxu/subscriptions","organizations_url":"https://api.github.com/users/jseanxu/orgs","repos_url":"https://api.github.com/users/jseanxu/repos","events_url":"https://api.github.com/users/jseanxu/events{/privacy}","received_events_url":"https://api.github.com/users/jseanxu/received_events","type":"User","site_admin":false},"milestone":null,"comments":5,"created_at":"2015-08-31T02:36:44Z","updated_at":"2015-09-02T19:54:33Z","closed_at":null,"body":"Using this code the `WinJS.UI.*` controls contained in the templates are not instantiated when the pages ready/processed functions are called.\r\nIt seems this only happens once the section is pushed into the hub.\r\nBut I need to connect event listeners inside my page, and I don't want to do it in the hub pages control, but on the individual section pages.\r\n\r\n```\r\n      hub = element.querySelector(\".hub\").winControl;\r\n      sections[this.model.inspection.vehicularGroup].reduce((function(_this) {\r\n        return function(promise, section) {\r\n          return promise.then(function() {\r\n            return WinJS.UI.Pages.render(\"/pages/templates/_\" + section + \".html\", null, {\r\n              model: _this.model\r\n            }).then(function(result) {\r\n              var hubSection;\r\n              hubSection = result.element.querySelector(\"div[data-win-control='WinJS.UI.HubSection']\");\r\n              hub.sections.push(hubSection.winControl);\r\n              WinJS.Binding.processAll(hubSection, _this.model);\r\n              return WinJS.Resources.processAll(hubSection);\r\n            });\r\n          });\r\n        };\r\n      })(this), WinJS.Promise.as());\r\n```\r\n\r\nand that is an example section page:\r\n\r\n````\r\n<script src=\"_obligations.js\"></script>\r\n  <div class=\"dialog obligations jumpToOverview\"\r\n       data-win-control=\"WinJS.UI.HubSection\"\r\n       data-win-res=\"{ winControl: {header: 'pages/inspectionPage.obligations'} }\"\r\n    >\r\n    <div data-win-bind=\"style.display:inspection.readOnly WinJS.Ext.Binding.displayBlockIfNot\">\r\n      <div data-win-control=\"WinJS.UI.SearchBox\" class=\"obligationInput\" data-win-options=\"{\r\n          chooseSuggestionOnEnter: true,\r\n          searchHistoryDisabled: true\r\n        }\"\r\n        data-win-bind=\"winControl.disabled:inspection.readOnly\">\r\n      </div>\r\n    </div>\r\n    <div style=\"overflow-y:auto;height:94%\">\r\n      <table>\r\n        <thead>\r\n          <tr data-win-bind=\"style.display:sortedObligations.length WinJS.Ext.Binding.displayRowIf\">\r\n            <th data-win-res=\"{textContent:'app/code'}\">Code</th>\r\n            <th data-win-res=\"{textContent:'app/text'}\">Text</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody data-win-control=\"WinJS.UI.Repeater\" data-win-bind=\"winControl.data:sortedObligations\">\r\n          <tr class=\"win-disposable win-itemcontainer win-container\" _data-win-control=\"WinJS.UI.ItemContainer\" data-win-options=\"{tapBehavior: 'toggleSelect', swipeBehavior:'none'}\">\r\n            <td data-win-bind=\"textContent:code\"></td>\r\n            <td><pre data-win-bind=\"textContent:text\"></pre></td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  </div>\r\n```\r\n\r\nThe repeater and search box all work, but they do not exist during the pages `processed` and `ready` callbacks, So I cannot set a special type on the search box input field like this from within the pages callbacks: `element.querySelector(\".obligationInput input.win-searchbox-input\").type = \"tel\"`. Cause \"input.win-searchbox-input\" in only created when WinJS.UI.processAll has been called on the pages content, and I thought that has happened when `processed` is called. It seems the hub does something strange (optimization?)"},"comment":{"url":"https://api.github.com/repos/winjs/winjs/issues/comments/137226001","html_url":"https://github.com/winjs/winjs/issues/1425#issuecomment-137226001","issue_url":"https://api.github.com/repos/winjs/winjs/issues/1425","id":137226001,"user":{"login":"jseanxu","id":6741017,"avatar_url":"https://avatars.githubusercontent.com/u/6741017?v=3","gravatar_id":"","url":"https://api.github.com/users/jseanxu","html_url":"https://github.com/jseanxu","followers_url":"https://api.github.com/users/jseanxu/followers","following_url":"https://api.github.com/users/jseanxu/following{/other_user}","gists_url":"https://api.github.com/users/jseanxu/gists{/gist_id}","starred_url":"https://api.github.com/users/jseanxu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jseanxu/subscriptions","organizations_url":"https://api.github.com/users/jseanxu/orgs","repos_url":"https://api.github.com/users/jseanxu/repos","events_url":"https://api.github.com/users/jseanxu/events{/privacy}","received_events_url":"https://api.github.com/users/jseanxu/received_events","type":"User","site_admin":false},"created_at":"2015-09-02T19:54:33Z","updated_at":"2015-09-02T19:54:33Z","body":">>But I need to connect event listeners inside my page, and I don't want to do it in the hub pages control, but on the individual section pages.\r\n\r\nCould you clarify this? Why exactly can't you just hook up event listeners after processing the Hub?"}}