Google은 다양한 소셜 미디어 아울렛에 메시지를 게시 할 수있는 앱을 개발 중입니다. Google의 디자이너는 사용자가 슬라이딩 패널을 사용하여 애플리케이션의 다양한 설정을 변경할 수있는 일련의 상호 작용을 만들었습니다. 나는 설명하기 위해 빠른 화면 캡을 완료했습니다 :Ember.js : 복잡한보기 레이아웃, 적절한 접근 방식은 무엇입니까?
는http://screencast.com/t/tDlyMud7Yb7e
내가 가진 문제는 아키텍처 중 하나입니다. 보기 또는 컨트롤러 (또는 둘 다)를 사용하여 이러한 패널에 포함될 메서드를 저장해야하는지 여부는 확실하지 않습니다. 다음은 패널 용 HTML입니다. 그들은 스크립트 태그 나보기에없는 현재 위치 :
<div id="panel-account-settings" class="panel closed">
<div class="panel-inner">
<a href="#" class="button button-close"><i class="icon-cancel"></i>close</a>
<h3>Account Settings</h3>
<a href="#" class="button primary button-ga">Google Analytics</a>
<a href="#" class="button primary button-link-shortening">Link Shortening</a>
<a href="/accounts/social/connections/" class="button button-disconnect">Disconnect Account</a>
</div>
<div id="panel-google-analytics" class="panel-inner">
<a href="#" class="button button-back"><i class="icon-arrow-right"></i>back</a>
<h3>Google Analytics</h3>
<div class="toggle">
<label>Off</label>
</div>
<p>We <strong>won't</strong> append stuff to your links, so they <strong>won't</strong> be trackable in your Google Analytics account.</p>
<img src="{{ STATIC_URL }}images/ga-addressbar.png" />
</div>
<div id="panel-disconnect" class="panel-inner">
<a href="#" class="button button-back"><i class="icon-arrow-right"></i>back</a>
<h3>Disconnect This Account</h3>
<p>If you disconnect this account you will lose all the metrics we tracked for each message. Are you absolute sure you want to get rid of them?</p>
<div class="button-group">
<a href="#" class="button button-disconnect">Disconnect</a>
</div>
</div>
</div>
비디오에 표시된 기어 아이콘이 계정 템플릿 베어 뼈 컨트롤러가
<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
<div class="avatar-name">
<p>{{account.name}}</p>
<p>@{{account.username}}</p>
<i class="icon-cog" {{action "openPanel" Social.SettingsView account }}></i>
</div>
{{/each}}
</script>
에 포함되어
Social.AccountsController = Ember.ArrayController.extend({
openPanel: function(view,account){
console.log(view,account);
$(this).parents(".item-account").addClass("active");
$("#panel-account-settings").prepareTransition().removeClass("closed");
}
});
뿐만 아니라 경로 및 모델. 달성하고자하는 상호 작용을 감안할 때 제 질문은 조각과 부품을 어디에 두어야합니까? 최소한 현재 계정 모델을 전달해야 변경 사항을 적용 할 계정을 알 수 있습니다.
<script type="text/x-handlebars" data-template-name="panelView">
<div id="panel-account-settings" class="panel closed">
{{ partial "panelSettingsView" }}
{{ partial "panelAnalyticsView" }}
{{ partial "panelDisconnectView" }}
</div>
</script>
을 한 후 기어 아이콘을 작업 도우미 계정 및 필요한 뷰에 전달할 수 :이 같은 mainPanel의 다른 뷰를 포함하는 것보기 ... 뭔가를 만드는 방법에 대해 생각했다. 그러나 그것이 올바른 접근인지 확실하지 않습니다. 나는 약간의 의견이나 제안을 고맙게 생각한다. 감사. 1
UPDATE 이상적으로 나는 결국 AJAX를 통해 각 패널의 내용에로드하고 싶습니다하지만 찾는에 아닌 필요로합니다.
업데이트 2
나는 논리를 포함하는 것의 PanelView을 만드는 시도 부하에있는 패널 :
Social.PanelView = Ember.View.extend({
tagName: 'div',
classNames: ['panel-inner'],
openPanel: function(view,account){
console.log(view,account);
}
});
을하지만 기어 아이콘에서 호출하려고 할 때 내가 오류가 발생했습니다 . 이 :
Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView
가되지 않는 올바른 구문이 :이 오류 줬어요
<i class="icon-cog" {{action openPanel target="Social.PanelView" }}></i>
?
UPDATE 3
추가 버전 정보 :
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
이 질문에 대한 답변은 없지만 작업 대상은보기보기 클래스의 인스턴스 여야합니다. '{{action openPanel target = "view"}}' – mehulkar
Mehul과 같은 것입니다. 문제는 계정의 컨트롤러가 패널보기와 관련이 없다는 것입니다. 아마도 그것은 내 문제의 일부입니다. 나는 단지 관련성이 있다고 생각하지 않습니다. 나는이 일을 성공적으로 수행하고있다 :' commadelimited