TOGOUTECH

javascript - EmberJS 嵌套 View 和 Controller

coder 2024-05-16 原文

我正在使用 EmberJS v1.0.pre 编写应用程序。我有一个 ArrayController,其中包含所有人员的列表。有一堆嵌套 View 显示人、他们的宠物和每只宠物的注释。

|----------------------------------------|
| John                                   | <- Person
|----------------------------------------|
|   Quincy (Dog)                         | <- Pet
|     - Super ornery                     | <- Note
|     - Likes XYZ Dog food               |
|     - Will eat your socks              |
|                                        |
|   Tom (Cat)                            |
|    - Always (not) catching mice        |
|                                        |
|----------------------------------------|
| Roger                                  |
|----------------------------------------|
|   V (Dog)                              |
|    - Likes XYZ Dog food                |
|    - Sneezes, but it's ok              |
|                                        |
|----------------------------------------|
| ...                                    |

从纯 MVC 的 Angular 来看,感觉每个 child 都应该有一个 Controller ,但我不知道如何在 Ember 中实现它。有最上面的 Array Controller ,然后是所有单独的 View 。如果我想删除或编辑笔记,似乎我需要将 View 的上下文传递给 Controller ​​。

// in the view
click: function () {
  this.get('controller').updateNote(this.get('content'))
}

这让我感觉很糟糕,View 不应该是数据的权威来源。我的假设是 ArrayController 会实例化 itemControlerClass 以及 itemViewClass

更新:我创建了一个 fiddle更好地说明我的问题。功能有意不完整,目的是通过单击列表中的项目时增加内容来完成功能。

更新:抱歉,我不小心删除了 fiddle !我正在为最终解决方案做一些工作,所以我将尝试创建一个带有解决方案的新 fiddle 。

最佳答案

"From the pure MVC standpoint it feels like there should be a controller for each child"

您不需要为每个项目使用一个 Controller ,而是为每个对象集合(人、宠物、笔记)使用一个 ArrayController。顺便说一句,对子对象(狗、笔记)的任何操作都不应该传递给 App.PersonsController。那会破坏 Separation of Concerns原则。

Ember.Router 文档涵盖了您想在单个对象中嵌套 View 的情况(例如 /:people_id)。但是您想嵌套对象数组的 View 。我想不出嵌套 {{outlet}} View 的方法,但您可以执行以下操作:

在3个ArrayController中加载People、Pets、Notes对象,并将子对象的 Action 委托(delegate)给对应的ArrayController。

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    route: '/',
    persons: Ember.Route.extend({
        connectOutlets: function(router) {

          router.get('applicationController').connectOutlet('persons');
          // App.Note.find() fetches all Notes,
          // If you are not using ember-data, make sure the notes are loaded into notesController
          router.set('notesController.content', App.Note.find());
          router.set('petsController.content', App.Pet.find());
        }
    })
  })
});

然后您的people 模板应该如下所示:

{{#each person in people}}
  <h1>My name is {{person.name}}</h1>

  {{#each pet in person.pets}}
     I have a pet with name {{pet.name}}
     <a {{action delete pet target="App.router.petsController">Delete pet</a>
  {{/each}}      

  {{view Ember.TextField valueBinding="myNewPetName" type="text"}}
  <a {{action create myNewPetName person target="controller"}}>
    Add a new pet for this person
  </a>


  {{#each note in person.notes}}
    <!-- delete, create, edit ... -->
  {{/each}}

如您所见,对子对象的操作委托(delegate)给它的 Controller (pet -> petsController),将对象作为上下文传递。在 create 操作的情况下, Controller 需要知道宠物 belongsTo 属于哪个人。因此,我们传递了 2 个上下文:人和宠物的属性(为简单起见,我假设只是宠物的名字)。

在您的 App.petsControllers 中,您应该执行以下操作:

App.PetsController = Ember.ArrayController.extend({
   delete: function(e) {
     var context = e.context;
     this.get('content').removeObject(context);
     // Also, if you use ember-data,
     // App.Pet.deleteRecord(context);
   },

   create: function(e) {
     var petName = e.contexts[0]
     var person = e.contexts[1];
     this.get('content').pushObject({name: petName, person: person});
     // with ember-data:
     // App.Pet.createRecord({name: petName, person: person});
   }
});  

关于javascript - EmberJS 嵌套 View 和 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12602429/

有关javascript - EmberJS 嵌套 View 和 Controller的更多相关文章

  1. c# - ASP.net MVC - 每个 View 或每个操作一个 ViewModel? - 2

    每个View有一个ViewModel还是每个Controller操作一个更好?例子:publicProjectController:Controller{publicActionResultEdit(intid){varproject=...;returnView(newProjectEditViewModel(project));}[HttpPost]publicActionResultEdit(ProjectEditViewModelmodel){}**OR**[HttpPost]publicActionResultEdit(Projectmodel){}[HttpPost]pub

  2. c# - asp.net core 2 中基本通用 Controller 类的 HttpGet 属性名称的路由名称 - 2

    我有一个通用Controller,它有几个派生Controller类。但我不知道如何处理HttpGet的路由名称,因为它需要常量。[HttpGet("{id}",Name="shouldnothardcodedhereforderivedclass")]publicvirtualasyncTask<IActionResult>Get(intid)我需要路由名称,因为在我的HttpPost函数中我想返回CreatedAtRoute(),它需要HttpGet的路由名称路由名称不能硬编码,因为所有派生类都需要有不同的路由名称。这是基本Control

  3. c# - 来自 ControllerContext 的 ActionDescriptor - 2

    鉴于我只能访问ControllerContext而不能访问Action____Contexts获取当前正在执行的ActionDescriptor的最佳方法是什么?到目前为止,我找到的唯一方法是:newReflectedControllerDescriptor(context.Controller.GetType()).FindAction(context,context.RouteData.GetRequiredString("action"));这是最优方法吗?这个类被命名为ReflectedControllerDescriptor的事实让我想知道这个操作是否有很高的

  4. c# - Dapper 的嵌套 `using` 子句 - 澄清? - 2

    我正在了解Dapper如何在幕后工作。但是我看到了这种我不理解的处理模式。大致一般—thisQueryAsync是如何实现的:/*1*/publicasyncTask<IEnumerable<T>>QueryAsync<T>(stringsql,Func<IDataRecord,T>projector,DbConnection_conn,dynamicparam=null)/*2*/{/*3*//*4*/DbDataReaderreader=null;/*5*/boolwasClosed=_conn.State==ConnectionSt

  5. c# - FilePathResult 的已完成事件 - 2

    我想在用户完成下载后做一些事情publicclassTestController:Controller{publicFilePathResultIndex(){returnFile("path/to/file","mime");}}我尝试的是将以下事件添加到测试Controller,但它们都在用户完成下载之前触发(除了永远不会调用的析构函数)protectedoverridevoidEndExecute(IAsyncResultasyncResult){base.EndExecute(asyncResult);}protectedoverridevoid

  6. c# - 复杂模型/子模型验证 (MVC) 的最佳方法 - 2

    问题我知道有很多方法可以在MVC中进行模型验证,并且有很多关于这个主题的文档。但是,我不太确定验证模型属性的最佳方法是什么,“子模型”属于相同类型。请记住以下几点我仍然想利用TryUpdateModel/TryValidateModel方法这些“子模型”中的每一个都有强类型ViewMainModel类有一个强类型View,用于呈现整体显示View这听起来可能有点令人困惑,但我会投入一些代码来澄清。以下类为例:主模型:classMainModel{publicSomeSubModelProp1{get;set;}publicSomeSubModelProp2{get;set;}}一些子模

  7. c# - VS2010 'Show Derived Types' 类 View 中缺少选项 - 2

    我正在VisualStudio2010中处理VisualC#项目,并在类View中浏览各种类型。根据this文档中,类View设置菜单中应该有一个类似于“显示基本类型”选项的“显示派生类型”选项。然而,它似乎不见了。我还没有设法找到任何错误报告或对这个问题的引用,所以我想知道我是否只是遗漏了一些东西。 最佳答案 我在VisualStudio2010中看到它,这是一个具有派生类型的C++项目。但是,在使用派生类型提到的C#项目中,未提供此选项。我正在检查一个没有派生类型的项目,看看这是否会导致该选项被禁用。编辑:似乎没有派生类型的项目

  8. c# - Web API OData V4 开放类型 - 如何配置 Controller 和数据上下文 - 2

    我有一个包含WebAPIOData服务层的Multi-Tenancy应用程序。我有一个支持自定义字段的新要求,这对每个租户都是唯一的,并且向我的表添加通用“customfield01”、“customfield02”列不够灵活。我探索了多种在后端描述和保存自定义数据的方法,但更具挑战性的部分似乎是扩展我的odata服务以包含每个租户的不同自定义字段。以下链接描述了带有WebAPI的odatav4中的“开放类型”:http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/odata-v4/use-open-ty

  9. c# - 谁能想出一种优雅的方法来减少这种嵌套的 if-else 语句? - 2

    if(Request.QueryString["UseGroups"]!=null){if(Request.QueryString["UseGroups"]=="True"){report.IncludeGroupFiltering=true;}else{report.IncludeGroupFiltering=false;}}else{report.IncludeGroupFiltering=false;} 最佳答案 只需一次检查:report.IncludeGroupFilteri

  10. c# - 用 LINQ 替换嵌套的 foreach;修改和更新内部深处的属性 - 2

    考虑更改5或6层深对象的一个​​或多个属性的数据成员的要求。有一些子集合需要迭代才能到达需要检查和修改的属性。在这里,我们调用了一个方法来清除员工的街道地址。由于我们在循环中更改数据,当前的实现需要一个for循环来防止异常:Cannotassignto"someVariable"becauseitisa'foreachiterationvariable'这是带有嵌套foreach和for的当前算法(混淆)。foreach(varempincompany.internalData.Emps){foreach(varaddrinemp.privateData

随机推荐

  1. c# - 按值和按引用传递数组 - 2

    这些是我正在阅读的一本c#书中的示例,只是有点难以理解这个示例实际在做什么,希望得到解释以帮助我进一步理解这里发生的事情。//createsandinitialzesfirstArrayint[]firstArray={1,2,3};//CopythereferenceinvariablefirstArrayandassignittofirstarraycopyint[]firstArrayCopy=firstArray;Console.WriteLine("TestpassingfirstArrayreferencebyvalue");Console.Write(&#

  2. c# - 如何在 itextsharp pdf 创建中设置单元格宽度 - 2

    如何使用C#在itextsharppdf单元格中设置单元格宽度和高度。我只是用cell.width=200f;但它应该显示错误信息。widthcannotbeset.我该怎么办?.. 最佳答案 您没有设置单元格的宽度。您应该设置列的宽度。您可以通过将它们应用于表格对象来做到这一点:float[]widths=newfloat[]{1f,2f};table.SetWidths(widths);Neha的回答是设置表格对象的宽度更多引用资料在这里:http://www.mikesdotnetting.com/Article/86/iTe

  3. c# - 在 C# 中找出文件所有者/创建者 - 2

    这个问题在这里已经有了答案:关闭11年前。PossibleDuplicate:Getting/settingfileownerinC#我搜索了Internet但没有找到如何获取文件创建者/所有者在FileInfo类中只有lastAccessTime、Size等其他属性,但没有所有者/创建者。有人知道答案吗?

  4. c# - streamWriter 重写文件或附加到文件 - 2

    我正在用这个for($number=0;$number<5;$number++){StreamWriterx=newStreamWriter("C:\\test.txt");x.WriteLine(number);x.Close();}如果test.text中有内容,此代码将不会覆盖它。我有两个问题1:howcanImakeitoverwritethefile2:howcanIappendtothesamefile使用C# 最佳答案 试试FileMode枚举器:FileStreamfappend=File.Op

  5. c# - 按 id 从通用列表中删除对象 - 2

    我有一个这样的域类:publicclassDomainClass{publicvirtualstringname{get;set;}publicvirtualIList<Note>Notes{get;set;}}我将如何从IList<Note>中删除一个项目??如果它是一个列表,我就可以做到,但它必须是IList因为我将Nhibernate用于我的持久层。理想情况下,我希望在我的域类中使用这样的方法:publicvirtualvoidRemoveNote(intid){//removethenotefromthelisthereList<Note>n

  6. c# - WinForm 应用程序中的 Microsoft 报表教程 - 2

    我在我的WinForm应用程序项目中使用MicrosoftReport。我在表达式和组甚至过滤器和许多其他方面有问题。我正在寻找MicrosoftReport的完整教程。但我直到现在才找到任何教程。可以你帮我找教程?我找到了this.告诉我你是否更了解。谢谢 最佳答案 创建客户端报告定义文件(RDLC)添加一个名为“RDLC”的文件夹。这将保存我们的RDLC报告。右键单击RDLC文件夹,选择“添加新项目..”并添加“产品”的“RDLC”名称。我们将使用“报告向导”引导我们完成创建RDLC的步骤在下一个对话框中,为数据集命名为“Pro

  7. c# - 如何将焦点设置到 WPF 工具包数据网格的特定单元格 - 2

    我正在使用WPF工具包提供的DataGrid控件来显示产品列表及其OpenStock、描述等。在此DataGrid中,我已将OpenStock列设置为可编辑,其余列不可编辑。当我的这个窗口加载时,我现在想要的是,我想将键盘焦点设置到OpenStock列的第一个单元格,如果可能的话,在编辑模式下。我搜索了2天,最后在这里发布。任何帮助或代码示例都会有所帮助。<my:DataGridAutoGenerateColumns="False"ItemsSource="{Binding}"Margin="2,2,2,55"x:Name="

  8. c# - 如何在 Sharepoint 中查找登录用户? - 2

    我开发了一个必须部署在Sharepoint服务器上的“Web部件”。我需要用户的用户名,该用户已登录Web部件中的共享点服务器。我如何获得该用户名? 最佳答案 以下对我有用:SPWebtheSite=SPControl.GetContextWeb(Context);SPUsertheUser=theSite.CurrentUser;stringstrUserName=theUser.LoginName;并检查this出。 关于c#-如何在Sharepoint中查找登录用户?,我们在Sta

  9. C# - 获取对对象的引用数 - 2

    我正在尝试为我正在编写的小爱好游戏编写一个简单的资源管理器。这个资源管理器需要做的任务之一是卸载未使用的资源。我可以想到用两种方式做到这一点:当一个对象不再需要引用资源,它必须调用资源管理器的方法表示不再使用它;或者当一个对象不再需要引用资源,它只是将其设置为空。然后当要求资源管理器卸载未使用的资源,它得到的引用计数(通过反射?)每个资源。如果引用计数是一个(资源管理器将有对资源的引用),卸载资源。有没有办法在C#中实现第二个解决方案?谢谢。 最佳答案 一些事情。首先,对象不被引用计数;引用计数方案存在循环引用问题,即两个对象相互引

  10. c# - 为什么我们要实现接口(interface)? - 2

    我们为什么要实现,例如ICloneable或IDisposable。我不是在问ICloneable或IDisposable做什么,但我想了解实现这些接口(interface)的充分理由是什么,而不是仅仅编写一个处理或克隆我们的对象的方法? 最佳答案 使用接口(interface)可以使这些功能的使用保持一致。这样,当另一个类想要/需要使用您的类时,它可以将其作为可克隆的一次性对象来使用,而无需担心您的特定实现细节。 关于c#-为什么我们要实现接口(interface)?,我们在Stack