Emberjs : 동적 템플릿 중첩 및 라우팅

저는이 사실을 대부분 알아 내려고 노력해 왔습니다. 제 생각에는 제가 거의 다 왔다고 생각하기 때문에 정신을 차리게합니다.하지만 마지막 부분을 이해할 수는 없습니다. .Emberjs : 동적 템플릿 중첩 및 라우팅

나는 사이드 바 렌더링지도라는 경로를 가지고, 그것은 사이드 바 콘텐츠에 대한 명명 된 콘센트가 내 :

map.hbs :

<div id="map-container"> 
    {{render sidebar}} 
    <div id="map-canvas"> 
    </div> 
</div>

... 사이드 바. hbs :

<div id="content-menu"> 
    {{outlet sidebar-content}} 
</div>

사이드 바의 각 메뉴 항목에는 loadModule이라는 사용자 지정 액션이 있습니다.이 동작은 사이드 바 콘텐츠 콘센트에 명명 된 뷰 렌더링을 수행합니다 ({{action 'loadModule' 'sidebar.module'}}) :

해당보기에 대한 컨트롤러 내의 모든 동작이 정상적으로 작동하며 단추 등으로 트리거하거나 SidebarModuleViews의 didInsertElement에서 해당 동작을 호출 할 수 있습니다.

제 문제는 이러한 뷰에 대한 모델을 정의 할 수 없다는 것입니다. 따라서 컨트롤러에서 API로 데이터를 가져 오면 해당 데이터가 템플릿으로 렌더링되지 않습니다.

나는 link-to를 사용해 보았지만 현재 페이지를 새로 고치지 않고 현재 뷰포트에 템플릿을 추가 할 수 없었습니다. 사이드 바가있는 지점을 패배시킵니다 (경로를 원하지 않습니다. 기록과 함께 내 가게 업데이트, 사이드 바에서 핸들의 헬퍼/user.hbs 모델로 채워지지 않지만 나는 그것이 그러나, 렌더링 된 후에는 렌더링 된 템플릿에서 이러한 작업 중 하나를 트리거 할 수

var SidebarUserController = App.ApplicationController.extend({ 
actions: { 
    doSomething: function() { 
     alert('SOMETHING'); 
    }, 
    fetchUserProfile: function() { 
     //do something 
     var mod = this.store.find('profile', App.Session.get('uid')); 
    } 
} 
});

변경) 데이터. 여기

내 모델 :

var Profile = DS.Model.extend({ 
uid: DS.attr('string'), 
firstName: DS.attr('string'), 
lastName: DS.attr('string'), 
gender: DS.attr('string'), 
DOB: DS.attr('date'), 
email: DS.attr('string') 
}); 

module.exports = Profile;

여기 내 사이드 바/user.hbs입니다 : 해당 템플릿에서

<div class="container"> 
    <button {{action 'doSomething'}}>Do A Thing</button> 
    <h1>{{firstName}} {{lastName}}</h1> 
    <h4>{{id}}</h4> 
    {{#if isAuthenticated}} 
     <a href="#" {{action 'logout'}}>Logout</a> 
    {{/if}} 
</div>

의 이름, 성 및 ID 필드에도 불구하고, 채워지지 않는 API에서 데이터를 가져와 성공적으로 저장하고 있습니다. 그것은, 사이드 바 내 router.map을 도움이된다면

는 또한,/사용자는 다음과 같습니다

여기 근본적인 문제는 내가의 모델을 설정하는 방법을 작동하지 않을 수 있다는 것입니다 있다고 생각

this.resource('sidebar', function() { 
     this.route('user'); 
    });

컨트롤러는 경로를 트리거하지 않습니다. 이 잘못 될 건가요?

출처

2013-12-17 Stephen Wright

좋아, 그래서 내 특정 인스턴스에 대한이 일을했습니다. 그것은 최선의 방법이 아닐지 모르지만 그것이 내가 원하는 것일 수도 있습니다 :

내 MapRoute에서는 setupController 함수의 추가 사이드 바 메뉴에 대한 모델과 컨트롤러를 설정했습니다. 이렇게하면 페이지로드시 중요한 데이터 (예 : 사용자 프로필 등)를로드 할 수 있으며 루트의 각 사이드 바 모듈에 대한 렌더링 기능을 유지할 수 있습니다. 이렇게하면 초기 데이터를로드 할 수 있습니다. 후속 기능에서 각 사이드 바 모듈 컨트롤러의 모델 데이터를 업데이트하십시오.

map_route.js :

actions: { 
     loadModule: function(module) { 
      this.render(module, {into: 'sidebar', outlet: 'sidebar-content'}); 
     } 
}, 
setupController: function(controller, profile) { 
    var model = this.store.find('profile', App.Session.get('uid')); 
    var controller = this.controllerFor('sidebar.user'); 
    controller.set('content', model); 
}, 
...

출처

2013-12-18 09:56:46

Emberjs : 동적 템플릿 중첩 및 라우팅

답변

관련 문제