ember.js containerview视图控制器绑定不工作
我的余烬代码未将子视图绑定到ContainerView控制器下的控制器 我有一个模板“metrics”,MetricsView没有从其控制器中提取标题属性值。这是container视图下的子视图,与containerview下的所有其他视图相同 以下是我使用的snippent代码: 这就是我的容器视图的样子ember.js containerview视图控制器绑定不工作,ember.js,Ember.js,我的余烬代码未将子视图绑定到ContainerView控制器下的控制器 我有一个模板“metrics”,MetricsView没有从其控制器中提取标题属性值。这是container视图下的子视图,与containerview下的所有其他视图相同 以下是我使用的snippent代码: 这就是我的容器视图的样子 // Container View App.DashboardContainerView = Ember.ContainerView.create({ childViews: [],
// Container View
App.DashboardContainerView = Ember.ContainerView.create({
childViews: [],
view1: App.MetricsView,
view2: App.ResultsView,
});
以下是我的子视图的外观:
App.MetricsView=Ember.View.create({
模板:Ember.TEMPLATES[“度量”]
});
以下是我的子视图容器的外观:
//未与子视图绑定的子视图的控制器,
//想要将标题从此控制器呈现到模板
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上打印,而是“-Summary”打印
如果您有任何建议,我们将不胜感激。当我发现该功能已被弃用时,我在这个问题上遇到了困难。我得到以下警告: 通过其childViews属性操纵Ember.ContainerView是 不赞成。请将ContainerView实例本身用作 Ember.MutableArray
您需要使用pushObject作为状态。您能将其放入JSFIDLE中,并准确指出哪些地方没有按预期工作吗?
<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);
}
};