ember.js containerview视图控制器绑定不起作用 [英] ember.js containerview view controller binding not working
问题描述
我的Ember代码未在ContainerView Controller下将子视图绑定到其控制器
My Ember Code is not binding child's view to its controllers under ContainerView Controller
我有一个模板 metrics，MetricsView并未从该模板中获取标题属性值控制器。这是容器视图下的子视图，与容器视图下的所有其他视图相同。
I have a template "metrics" for which MetricsView is not pulling title attribute value from its controller. This is a child view under container view and same is happenig with all other views which are under containerview.
这是我正在使用的代码片段：
Here is the code snippent I am using:
这是我的容器视图的样子
This is how my Container View looks like
// Container View
App.DashboardContainerView = Ember.ContainerView.create({
childViews: [],
view1: App.MetricsView,
view2: App.ResultsView,
});
这是我的子视图的样子：
App.MetricsView = Ember.View。 create（{
template：Ember.TEMPLATES [ metrics]
}）;
This is how my Child view looks like: App.MetricsView = Ember.View.create({ template: Ember.TEMPLATES["metrics"] });
这是我的子视图容器的外观：
//未与子视图绑定的子视图的控制器，
//希望将此控制器的标题呈现到模板
This is how my Child View's Container looks like: // Child View's Controller which is not binded with Child View, // Wanted to render title from this Controller to template
App.MetricsController = Ember.ObjectController.extend({
title: 'Metrics Page', // To Be deleted later
content : []
metrics : [],
view: Ember.View.create({
templateName: 'metrics'
}),
show : function(petId, onDone, onFail) {
_get('/fetch_one', onDone, onFail);
},
});
子模板// // {{title}}不是在UI上打印，而是-摘要打印
Child Template // Here {{title}} is not printing on UI but "-- Summary" prints
<script type="text/x-handlebars" data-template-name="metrics">
<div class='well well-large'>
<div class="container">
<div class="row">
<div class="span9">
<h4>{{title}}</h4>
<h4> -- Summary</h4>
</div>
<div class="span1">
<button {{action "toggle" }} class="close">×</button>
</div>
</div>
</div>
</div>
</script>
其他受支持的代码：
var App = Ember.Application.create({
appName: 'Portal',
debug: true,
demomode: 1,
version: '0.0.1'
});
App.Router.map (function () {
this.resource('pets');
this.resource('pet', {path: ':pet_id'}, function(){
this.resource('dashboard');
this.resource('list', function() {
this.route('summary');
this.route('results');
});
});
});
//ApplicationRoute
App.ApplicationRoute = Ember.Route.extend({
setupController: function(){
},
});
App.IndexRoute = Ember.Route.extend({
redirect : function() {
this.transitionTo('pets');
}
});
App.PetsRoute = Ember.Route.extend({
model: function() {
return App.Pet.find();
},
renderTemplate: function () {
this.render({ outlet: 'rightpane' });
}
});
App.PetsController = Ember.ArrayController.extend({
sortProperties : [ 'first_name' ],
sortAscending : true
});
App.DashboardRoute = Ember.Route.extend({
setupController: function(){
var menuItems;
if (App.DashboardContainerView.get('childViews')) {
App.DashboardContainerView.get('childViews').pushObject(App.DashboardContainerView.view1);
App.DashboardContainerView.get('childViews').pushObject(App.DashboardContainerView.view2);
menuItems = this.controllerFor('petDashboardMenu').get('model');
$(menuItems).each(function(index, menuItem) {
if (menuItem.id == 1 || menuItem.id == 2) {
alert(menuItem);
}
}); //TODO: Make the menu buttons active for which view is added.
}
//this.controllerFor('pets').set('model', App.Preference.find({ name: "Dennis" }));
this.controllerFor('petDashboardMenu').set('model', App.PetMenuItem.find());
},
renderTemplate: function () {
this.render({ outlet: 'rightpane' });
}
});
App.DashboardController = Ember.ObjectController.extend({
name: 'Dashboard'
});
App.PetDashboardMenuController = Ember.ArrayController.extend({
toggleMenuItem: function(menuItem) {
var link = $(event.srcElement);
var childViews = App.DashboardContainerView.get('childViews');
if (link.hasClass('active')) {
link.removeClass('active');
var present = false;
switch (link.text()) {
case 'Summary':
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view1);
break;
case 'Results':
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view2);
break;
default:
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view1);
}
if(present >= 0) {
// ToDo : For All Menu Items
switch (link.text()) {
case 'Summary':
App.DashboardContainerView.get('childViews').removeObject(App.DashboardContainerView.view1);
break;
case 'Results':
App.DashboardContainerView.get('childViews').removeObject(App.DashboardContainerView.view2);
break;
default:
App.DashboardContainerView.get('childViews').removeObject(App.DashboardContainerView.view1);
}
App.log('Removed Summary : Removed : View Count : ' + App.DashboardContainerView.get('childViews').length);
} else {
App.log('Removed Summary : Already Not Present : View Count : ' + App.DashboardContainerView.get('childViews').length);
}
} else {
link.addClass('active');
var present = null;
App.log('Link Text : "' + link.text() + '"');
switch (link.text()) {
case 'Summary':
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view1);
break;
case 'Results':
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view2);
break;
default:
present = App.DashboardContainerView.get('childViews').indexOf(App.DashboardContainerView.view1);
}
if(present >= 0) {
App.log('Adding Summary : Already Present : View Count : ' + App.DashboardContainerView.get('childViews').length);
} else {
// ToDo : For All Menu Items
switch (link.text()) {
case 'Summary':
App.DashboardContainerView.get('childViews').pushObject(App.DashboardContainerView.view1);
break;
case 'Results':
App.DashboardContainerView.get('childViews').pushObject(App.DashboardContainerView.view2);
break;
default:
App.DashboardContainerView.get('childViews').pushObject(App.DashboardContainerView.view1);
}
App.log('Added Summary : View Count : ' + App.DashboardContainerView.get('childViews').length);
}
}
}
});
App.log = function(message) {
if(App.debug) {
console.log(message);
}
};
任何指针都会受到赞赏吗？
Any pointers would be appreciated?
推荐答案
当我发现不推荐使用该功能时，我遇到了这个难题。我收到以下警告：
I was having difficulty with this exact issue when I discovered that the functionality is deprecated. I got the following warning:
通过其childViews属性操作Ember.ContainerView已被弃用
。请使用ContainerView实例本身作为
Ember.MutableArray。
Manipulating a Ember.ContainerView through its childViews property is deprecated. Please use the ContainerView instance itself as an Ember.MutableArray.
您需要将pushObject用作文档状态。
You'll need to use pushObject as the documentation states.
这篇关于ember.js containerview视图控制器绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
