【发布时间】：2016-02-20 01:51:14
【问题描述】：
我根据选中的复选框的计算属性开发了自己的解决方案。但是，如何将 progressBar 重构为在 bar 的 {{outlet}} 上呈现的 foo1 和 foo2 模板上的页面滚动量的计算属性？我已经看到了这个example，但我相信针对这个问题的正确 Ember.js 解决方案可能需要不同的方法......这是一个示例路由器：
this.route('bar', function() {
this.route('foo1');
this.route('foo2');
});
我创建了一个带有最小示例 progressBar 的 JSFiddle，它分为四个部分，这意味着它需要四个复选框才能将其填充到 100%（目前这是一个相当静态的值。）
https://jsfiddle.net/Deovandski/7sgkd1j0/
哈佛商学院
<section id="progressBarBase">
<div {{bind-attr id="progressBarValue"}}>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
<p>Checkbox 1: {{input type="checkbox" checked=checkValue_1}}{{progressBarController_1}}</p>
<p>Checkbox 2: {{input type="checkbox" checked=checkValue_2}}{{progressBarController_2}}</p>
JS
// Progress Bar Value
progressBarValue: "progress_0",
checkValue_1: false,
checkValue_2: false,
// ProgressBar Controller #1
progressBarController_1: Ember.computed('checkValue_1', function() {
if (this.get('checkValue_1') === true) {
if (this.get('progressBarValue') === "progress_0") {
this.set('progressBarValue', 'progress_1');
} else if (this.get('progressBarValue') === "progress_1") {
this.set('progressBarValue', 'progress_2');
} else if (this.get('progressBarValue') === "progress_2") {
this.set('progressBarValue', 'progress_3');
} else {
this.set('progressBarValue', 'progress_4');
}
} else {
if (this.get('progressBarValue') === "progress_4") {
this.set('progressBarValue', 'progress_3');
} else if (this.get('progressBarValue') === "progress_3") {
this.set('progressBarValue', 'progress_2');
} else if (this.get('progressBarValue') === "progress_2") {
this.set('progressBarValue', 'progress_1');
} else {
this.set('progressBarValue', 'progress_0');
}
}
}),
// ProgressBar Controller #2
progressBarController_2: Ember.computed('checkValue_2', function() {
if (this.get('checkValue_2') === true) {
if (this.get('progressBarValue') === "progress_0") {
this.set('progressBarValue', 'progress_1');
} else if (this.get('progressBarValue') === "progress_1") {
this.set('progressBarValue', 'progress_2');
} else if (this.get('progressBarValue') === "progress_2") {
this.set('progressBarValue', 'progress_3');
} else {
this.set('progressBarValue', 'progress_4');
}
} else {
if (this.get('progressBarValue') === "progress_4") {
this.set('progressBarValue', 'progress_3');
} else if (this.get('progressBarValue') === "progress_3") {
this.set('progressBarValue', 'progress_2');
} else if (this.get('progressBarValue') === "progress_2") {
this.set('progressBarValue', 'progress_1');
} else {
this.set('progressBarValue', 'progress_0');
}
}
}),
SCSS
#progressBarBase {
width: 100%;
height: 20px;
.EmberCliProgressBar {
border: 2px solid darken($ect-header-color, 75%);
height: 20px;
margin: 2px auto 2px auto;
width: 200px;
display: flex;
div:nth-of-type(-n+4) {
flex-grow: 1;
margin: 0px;
padding: 0px;
height: 100%;
flex-direction: column;
flex-wrap: wrap;
}
}
#progress_0 {
@extend .EmberCliProgressBar;
}
#progress_1 {
@extend .EmberCliProgressBar;
div:nth-of-type(-n+1) {
background: darken($ect-header-color, 25%);
}
}
#progress_2 {
@extend .EmberCliProgressBar;
div:nth-of-type(-n+2) {
background: darken($ect-header-color, 25%);
}
}
#progress_3 {
@extend .EmberCliProgressBar;
div:nth-of-type(-n+3) {
background: darken($ect-header-color, 25%);
}
}
#progress_4 {
@extend .EmberCliProgressBar;
div:nth-of-type(-n+4) {
background: darken($ect-header-color, 25%);
}
}
}
}
编辑#1：
我创建了一个full-fledged example，其中包含四个子路线和十二个进度步骤。这个例子也不同于简单的例子，因为我实现了一个位于progress_0 字符串和一个数字变量之间的接口，其中子路由通过递增/递减进行交互。
界面可以在我的Github看到。但是，我可以看到这个实现触发了“在渲染中更改 ProgressBarValue 两次”弃用，这将成为 Ember.js 3 上的一个问题。虽然这对于它自己的帖子来说是一个问题，但我只是想通知你以防万一你希望实施它。
【问题讨论】：
标签： ember.js