<!-- <nav id='top-bar'> <section> container
side-bar
main
options-panels
div (main)
tool-panels
</section>
--!>
{{project-list}} {{input-with-clear}} {{input}} <!--这是一个ember helper --!> {{icon-button class="clear-input" icon="close" action=(action "clear")}} <!--这是一个通用component,通过class来改变背景颜色--!>
components/input-with-clear.js 一个带功能的输入框 components/project-list.js f1 showSearch -->return this.get("projects.content,length") > this.get("minSearchProjects"); f2 filteredProjects -->Ember.computed("projects","searchTerm",function(){ let term = this.get('searchTerm'); if (term.length===0){ return this.get('projects'); } return this.get('store').peekAll('project').filter(function(item){ return item.get('name').toLowerCase().indexOf(term) > -1; }); }) 。project-list.hbs {{if showSearch}} {{输入框}} {{搜索结果}} {{else}} {{项目列表}}
component/browsers.js let browsers = [ { name:'' alt:'' } return browsers browsers.hbs {{browser-list browsers=model}} <!--这里的model就是model() {return browsers}里的browsers--!> {{#each browser as |browser|} <!--这是数据流转的过程--!>
{{browser-view-port clickHandler=(action "viewPortClick") as |options|}} *{{outlet "browser-toolbar"}}* {{save-status}} {{project-listing project=model relaod='reload' conflict='conflict'}} {{project-structure-listing project=model}} *{{outlet "browser-overlays"}}* {{url-bar}} {{tooltip-container}} {{yield (hash section='body')}} {{text}} or {{yield (hash section='tooltip')}} {{icon-button}} {{buffered-input}} {{input}} {{browser-iframe clickHandler=(action 'viewPortClick')}}
components/browser-view-port.js f1 inject browser,selectorMatcher,uiState,webSocket f2 hoverSelector:':hover:not(html):not(body):not(head)', f3 willInsertElement(){ this.get('selectorMatcher').Register(this.hoverSelector,this,this.updateHoveredElement)} f4 willDestroyElement(){} ...unRegister f5 updateHoverElement(){ const element = elements.get('lastObeject') this.set('uiState.viewPort.hoveredElement',getAttributeList(element).length ? element : null); }; f6 actions:{viewPortClick(),reconnectWebsocket()} components/url-bar.js f1 backDisabled f2 disabled f3 forwardDisabled f4 loading f5 mode f6 noBackUrl f7 noForwardUrl f8 url f9 updateUrl actions back forward submit component/tooltip-container.js f1 delay:{show:500,hide:0} f2 placement:top f3 triggerEvents:'hover' f4 viewport:{selector:'body',padding:0} f5 init(){} f6 didInsetElement(){ Ember.run.next(this,this.createTooltip)} f7 willDestroyElement() Ember.run.next(this,this.destroyTooltip)} f8 createTooltip()
queryParams:['url','baseurl'],
url:Ember.computed.alias('browser.url')
baseurl:Ember.computed.alias('browser.baseurl')
clickHandler:null
f1 setClickHandler(fn){this.clickHandler = fn;}
f2 clearClickHandler(fn){this.clickHandler = null}
actions:{
viewPortClick(){
if(this.clickHandler){
this.clickHandler(...arguments);
}}}
- 首先,ember路由和模板的执行顺序是,路由从外到内->模板是从内到外
- 子模板的都会渲染到父模板的{{outlet}}上,最终所有的模板都会被渲染到application的{{outlet}}上。
- 路由A B C D E ,执行C的时候也会从A开始执行
默认情况下(不显示定义controller的时候)setupController会把它的model属性设置为该route的model
如果显示定义setupController的话,需要做这一步
this._super(controller,model)
当url变化时,deactive执行
store.unloadAll('spider')
卸载,这里是把store里的数据全删除
普通用法
object[key] = value
or object.key = value
同时能用于
上图controller中的actions也可以在route里定义