我正在使用 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/
我想为我的元素创建饼图，所以我正在使用ChartJS，但是chartJS存在一些问题，如果我使用10到20个数据字段，那么时间图表看起来不错，但是当我我在一个图表中应用了50到60个以上的数据字段，所以图表看起来比图例小，如果有时数据字段比隐藏的图表多，你只能看到图例，图表就不见了。我想为该图例设置高度或宽度，如果有更多数据，也适用于滚动条。这是供您引用的fiddle链接https://jsfiddle.net/KDM1010/5um78rbk/<canvasid="myChart"width="500"height="300"&g
在构建Vue应用程序时，我们在每个模板中重复使用某些Vue组件。我们的网格系统存在于.region、.layout、.grid、.column元素之外。它们都是独立的Vue组件(,...)。我们现在在每个模板中都这样做:importBlMainfrom'~components/frame/main/Main.vue'importBlRegionfrom'~components/frame/region/Region.vue'importBlLayoutfrom'~components/frame/layout/Layout.vue'imp
我想确保我所有的onClick事件都在onKeyDown事件旁边。我将使用eslint-plugin-jsx-a11y来确保这一点。但在代码中，这是一种实现这种泛型的方法。我的意思是，一直这样做会很烦人:if(event.keyCode===13){...}如果用户使用onClick中的执行函数，我希望有一种方法可以告诉onKeyDown中的元素。或者类似的解决方案http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/例如，在Angular方面，我很清楚。让我们寻找
如何在以“函数式”方式编写的脚本中以最“纯粹”的方式操作DOM。例如，如果我只需要更改元素宽度，我应该使用像这样的典型语法:document.querySelector(".class").style.width=...或者编写专门的函数，比如:functionresize(el,w){returnel.style.width=w;}resize(document.querySelector(".class",100));我想，我了解函数式编程的一般概念，但我遇到的所有示例都集中在处理数字或字符串上。操作DOM被认为是副作用，所以我想知道如何以正确的方式
我正在使用以下代码但没有成功://NativeBase容器内部<MapView.Animatedref="map"style={styles.map}showsUserLocation={true}zoomEnabled={true}showsMyLocationButton={true}showsCompass={true}showScale={true}showsIndoors={true}mapType={this.state.mapTypes[this.state.mapTypeCode]}/>//类的componentDidMount内部navig
如果我有一个Nodejs流，例如来自process.stdin或fs.createReadStream，我如何将其转换为RxJsObservable使用RxJs5流？我看到了RxJs-Node有一个fromReadableStream方法，但看起来它已经将近一年没有更新了。 最佳答案 对于任何正在寻找这个的人，根据Mark的建议，我为rxjs5改编了rx-nodefromStream实现。import{Observable}from'rxjs';//Adaptedfromhttps://github.com/Reac
我得到了一些在Canvas上生成路径的代码。路径对象看起来与此类似:<pathclass="link"d="M450,215.L265,236L225,236"style="stroke-width:1;"></path>在View中(a,b,c字母只是为了说明问题):我的问题是我想在线的中间画一些箭头(标记)，在“a”到“b”之间，但是当我创建一个标记并执行标记中间属性时，它会在b点生成。我试图在a和b之间做一些点，但是marker-mid在那里和b点上做了箭头。来自WEBAPI文档:Themarker-midd
我想做什么我写了一个虚拟模块my-component，它基本上导出了一个类Something。我把它放在app/modules/中。现在我想使用app/app.js中的导入语法来访问它:import{Something}from'my-component';期望:根据我当前的Webpack配置(如下)，我希望它能工作。实际:这会引发错误:ERRORin[default]/<project_dir>/app/app.ts:1:26Cannotfindmodule'my-component/Something'.我尝试解决的问题我知道模块本身的定
我知道在Java中有一个编译器可以在您编写错误代码时告诉您。但是Javascript不能那样工作，因为它没有编译器。但是，“linting”javascripts是编译代码的方式吗？ 最佳答案 Linting正在解析代码以验证语法和格式是否正确并遵循良好实践。linter会告诉您缩进是否不正确，或者您是否应该在=运算符周围添加空格。如果您的代码包含众所周知的安全漏洞或代码异味，linter也会向您发出警告。编译是解析代码以验证语法是否正确并将代码转换为不同的语言(通常是更快的语言)。那么有什么区别呢？编译:语法验证代码转换为不同的语
如何在xAxes上设置最小值和最大值？它在yAxes上工作正常，但在xAxes上它没有显示任何行为。我的xAxes使用的是type:'time'。我的xAxis标签也使用了moment对象。但是当我删除类型时间并使用普通数字时它也不起作用。我使用的是Chart.js版本2.2.2。scales:{yAxes:[{ticks:{beginAtZero:false,}}],xAxes:[{type:'time',ticks:{min:moment(1471174953000),max:moment(1473853353000)}}]}Hereisthechart.jsTim
我想为我的元素创建饼图，所以我正在使用ChartJS，但是chartJS存在一些问题，如果我使用10到20个数据字段，那么时间图表看起来不错，但是当我我在一个图表中应用了50到60个以上的数据字段，所以图表看起来比图例小，如果有时数据字段比隐藏的图表多，你只能看到图例，图表就不见了。我想为该图例设置高度或宽度，如果有更多数据，也适用于滚动条。这是供您引用的fiddle链接https://jsfiddle.net/KDM1010/5um78rbk/<canvasid="myChart"width="500"height="300"&g
在构建Vue应用程序时，我们在每个模板中重复使用某些Vue组件。我们的网格系统存在于.region、.layout、.grid、.column元素之外。它们都是独立的Vue组件(,...)。我们现在在每个模板中都这样做:importBlMainfrom'~components/frame/main/Main.vue'importBlRegionfrom'~components/frame/region/Region.vue'importBlLayoutfrom'~components/frame/layout/Layout.vue'imp
我想确保我所有的onClick事件都在onKeyDown事件旁边。我将使用eslint-plugin-jsx-a11y来确保这一点。但在代码中，这是一种实现这种泛型的方法。我的意思是，一直这样做会很烦人:if(event.keyCode===13){...}如果用户使用onClick中的执行函数，我希望有一种方法可以告诉onKeyDown中的元素。或者类似的解决方案http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/例如，在Angular方面，我很清楚。让我们寻找
如何在以“函数式”方式编写的脚本中以最“纯粹”的方式操作DOM。例如，如果我只需要更改元素宽度，我应该使用像这样的典型语法:document.querySelector(".class").style.width=...或者编写专门的函数，比如:functionresize(el,w){returnel.style.width=w;}resize(document.querySelector(".class",100));我想，我了解函数式编程的一般概念，但我遇到的所有示例都集中在处理数字或字符串上。操作DOM被认为是副作用，所以我想知道如何以正确的方式
我正在使用以下代码但没有成功://NativeBase容器内部<MapView.Animatedref="map"style={styles.map}showsUserLocation={true}zoomEnabled={true}showsMyLocationButton={true}showsCompass={true}showScale={true}showsIndoors={true}mapType={this.state.mapTypes[this.state.mapTypeCode]}/>//类的componentDidMount内部navig
如果我有一个Nodejs流，例如来自process.stdin或fs.createReadStream，我如何将其转换为RxJsObservable使用RxJs5流？我看到了RxJs-Node有一个fromReadableStream方法，但看起来它已经将近一年没有更新了。 最佳答案 对于任何正在寻找这个的人，根据Mark的建议，我为rxjs5改编了rx-nodefromStream实现。import{Observable}from'rxjs';//Adaptedfromhttps://github.com/Reac
我得到了一些在Canvas上生成路径的代码。路径对象看起来与此类似:<pathclass="link"d="M450,215.L265,236L225,236"style="stroke-width:1;"></path>在View中(a,b,c字母只是为了说明问题):我的问题是我想在线的中间画一些箭头(标记)，在“a”到“b”之间，但是当我创建一个标记并执行标记中间属性时，它会在b点生成。我试图在a和b之间做一些点，但是marker-mid在那里和b点上做了箭头。来自WEBAPI文档:Themarker-midd
我想做什么我写了一个虚拟模块my-component，它基本上导出了一个类Something。我把它放在app/modules/中。现在我想使用app/app.js中的导入语法来访问它:import{Something}from'my-component';期望:根据我当前的Webpack配置(如下)，我希望它能工作。实际:这会引发错误:ERRORin[default]/<project_dir>/app/app.ts:1:26Cannotfindmodule'my-component/Something'.我尝试解决的问题我知道模块本身的定
我知道在Java中有一个编译器可以在您编写错误代码时告诉您。但是Javascript不能那样工作，因为它没有编译器。但是，“linting”javascripts是编译代码的方式吗？ 最佳答案 Linting正在解析代码以验证语法和格式是否正确并遵循良好实践。linter会告诉您缩进是否不正确，或者您是否应该在=运算符周围添加空格。如果您的代码包含众所周知的安全漏洞或代码异味，linter也会向您发出警告。编译是解析代码以验证语法是否正确并将代码转换为不同的语言(通常是更快的语言)。那么有什么区别呢？编译:语法验证代码转换为不同的语
如何在xAxes上设置最小值和最大值？它在yAxes上工作正常，但在xAxes上它没有显示任何行为。我的xAxes使用的是type:'time'。我的xAxis标签也使用了moment对象。但是当我删除类型时间并使用普通数字时它也不起作用。我使用的是Chart.js版本2.2.2。scales:{yAxes:[{ticks:{beginAtZero:false,}}],xAxes:[{type:'time',ticks:{min:moment(1471174953000),max:moment(1473853353000)}}]}Hereisthechart.jsTim