我的ember.js应用程序被大致设置为:
路由器:
App.Router.map ->
@resource('site', { path: '/' }, ->
@resource('dashboard')
@resource('account')
@resource('pages', { path: '/:page_slug'}))
路由:
App.ApplicationRoute = Ember.Route.extend
model: ->
return App.Site.find(1)
App.PagesRoute = Ember.Route.extend
model: (params)->
return App.Page.find(params.page_slug)
编辑:
控制器(js而不是咖啡):
App.PagesController = Ember.ObjectController.extend({
needs: 'ApplicationController',
...
});
我有一个applicationController和一个PagesController。当我在页面上时,我想调用操作以删除当前页面。如果我将其放置在PagesController中,则可以使用,但是在我刷新页面之前,在ApplicationView中的导航菜单不会更新。所以...我认为我需要将操作放在应用程序controller中,然后将needs: ['ApplicationController']
添加到我的PagesController中。
但是,当我这样做时,我的页面模板中的所有内容都消失了。
我的应用程序模板中有一个{{outlet}}
,在网站模板中有另一个,最终显示页面模板。是的,很复杂,我知道,这可能是一种更好的方法,因此,任何建议都将不胜感激。哦,顺便说一句,我是一个真正的ember.js newb,因此需要明确阐明示例。(在蜡笔中用漂亮的颜色绘制它们实际上是理想的。)
事先感谢您的任何帮助。
这是刷新问题。在根资源site
中,我将加载到一个Site
模型中,该模型使用正在发送的URL返回该型号。最终,此应用将与多个域一起使用,每个域将被提供其自己的网站(大致基于该应用程序WP-Multisite概念)。然后,在pages
路由中,我正在基于其slug
属性加载网站的一页。一切都很好。因此,现在我想允许用户能够根据需要添加和删除页面。
所以,问题就是这个问题。当我在PagesController
级别上删除页面时,该页面删除恰好,但是ApplicationController未收到通知。即,我的导航菜单:
<ul class="left">
{{#each page in page}}
<li>{{#link-to 'pages' page.slug}}{{page.menu_name}}{{/link-to}}</li>
{{/each}}
<li id="add-page-button"><a data-tooltip title="Click here to add a new page to your site." href="#" data-reveal-id="addPageModal" data-reveal>+</a></li>
</ul>
没有通知页面丢失,因此不会通过从列表中删除该页面来更新导航菜单。添加工作正常,添加新页面时会更新导航列表,但是我在ApplicationController
级别这样进行此操作:
addNewPage: ->
# Get the site
site = @get('model')
# Get all the pages associated with the site
pages = site.get('page')
title = this.get('newTitle')
if (!title.trim())
return
slug = this.get('newSlug')
if (!slug.trim())
return
menu_name = this.get('newMenuName')
if (!menu_name.trim())
return
# Create a new page passing in our title, slug and menu_name
pages.create({title: title, slug: slug, menu_name: menu_name})
# Save the pages
pages.save()
if (pages.isError)
console.log(pages.errors)
else
@set('newTitle', '')
@set('newSlug', '')
@set('newMenuName', '')
$('#addPageModal').foundation('reveal', 'close')
这是我在PagesController
上的deletePage
代码(对不起,我有JS和Coffeescript的混合):
deletePage: function (slug) {
var page = this.get('model');
this.get('ApplicationController').deletePage(page);
this.toggleProperty('isEditingTitle');
this.toggleProperty('isShowingDeleteConfirmation');
this.transitionToRoute('site.index');
}
当我尝试此操作时,Ember很有帮助地让我知道我需要添加needs
,但是再次,当我这样做时,我的页面模板是空白的。
哦,是的,我什至尝试在按钮上设置target
属性,调用deletePage
操作。
我意识到我需要做的是以某种方式访问PagesController
中的Site
型号,但是我该如何处理。
这篇文章占据了史诗般的比例。对于那个很抱歉。再次感谢您的任何帮助。
需求在路线上不做任何事情,如果要从路线访问控制器,您只需使用this.controllerFor('application')
另外,当在控制器定义中使用需求时,应该像此needs: 'application'
或needs: ['foo', 'application']
...
好吧,全部,我弄清楚了。为了后代的缘故(以及其他寻求这个的人)。这是在具有属于属于关联的模型中删除对象的方法。
ApplicationController:
deletePage: function () {
# First we find the Site which all pages belongTo
# Just ignore the hard-coded '1' it's something I have to do to get it to work
site = App.Site.find(1);
# Then we get the current model, i.e., the 'page' we're on and about to delete
page = this.get('model');
# Then, we get all 'pages'
pages = site.get('page');
# We remove the object from the page which updates the navigation menu
pages.removeObject(page);
# We delete the record and save the 'pages' model
page.deleteRecord();
pages.save();
}
页面模板:
{{#if isShowingDeleteConfirmation}}
<div class="large-7 large-offset-5">
<label class="inline left">Are you sure? (Can't be undone)</label>
<button {{action 'deletePage'}} class='button tiny alert'>Yes</button>
<button {{action 'cancelDeletePage'}} class='button tiny'>Cancel</button>
</div>
{{else}}
<div class="large-2 right">
<button {{action 'showDeleteConfirmation'}} class='button tiny alert'>Delete Page</button>
</div>
{{/if}}
我可以向您展示if ... else语句(如果您需要我)背后的属性和逻辑。
基本上,用户单击"删除"按钮,显示其他按钮"是"one_answers"取消"。单击"是"后,deletePage
的操作被调用。
我发现了关于eleterecord方法的文档很少,基本上必须自己拼凑在一起。也许有一种更好的方法,可以重构。只要在评论中让我知道。