Question

我根据复选框的计算属性开发了自己的解决方案。但是，如何重构progressBar成为页面在{{outlet}}栏上呈现的foo1和foo2模板上滚动多少的计算属性？我已经看到了这个example，但我相信对这个问题的正确Ember.js解决方案可能需要一个不同的方法......这是一个示例路由器：

this.route('bar', function() {
    this.route('foo1');
    this.route('foo2');
});

我创建了一个带有最小示例progressBar的JSFiddle，它分为四个部分，这意味着它需要四个复选框才能将其填充为100％（此时这是一个相当静态的值。）

https://jsfiddle.net/Deovandski/7sgkd1j0/

HBS

<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上看到该界面。但是，我可以看到这个实现正在触发＆＃34;在渲染中两次更改ProgressBarValue＆＃34;弃用将成为Ember.js上的一个问题3.虽然这对于自己的帖子来说是一个问题，但我只是想通知你，以防你希望实现它。

Answer 1

您可以使用ember-waypoints。我开始用虚拟代码编写它，然后只是制作了一个工作版本。请参阅此repo上的此提交：https://github.com/patrickberkeley/scroll-incrementer/commit/bebdc4796bc13b77ac4d13ab9faffa3de833eb54

以下是重点：

<强>安装/ controller.js

import Ember from 'ember';

const {
  computed,
  get,
  set
} = Ember;

export default Ember.Controller.extend({
  progress: 0,
  steps: 12,

  init() {
    this._super(...arguments);
    set(this, 'completedStepNames', []);
  },

  stepSize: computed('steps', function() {
    return 100 / get(this, 'steps');
  }),

  _notComplete(stepName) {
    return !get(this, 'completedStepNames').contains(stepName);
  },

  actions: {
    incrementProgress(stepName) {
      if (this._notComplete(stepName)) {
        const current = get(this, 'progress');
        const stepSize = get(this, 'stepSize');

        set(this, 'progress', current + stepSize);
        get(this, 'completedStepNames').pushObject(stepName);
      }
    }
  }
});

<强>安装/ template.hbs

{{progress-bar
  barWidth=progress
}}

<nav>
  {{link-to 'Ubuntu' 'installation.ubuntu-virtual-box'}}
  {{link-to 'GitHub' 'installation.github'}}
</nav>

{{outlet}}

<强>安装/ github上/ template.hbs

{{#progress-section
  incrementProgress=(action 'incrementProgress' 'createAccount' target=installationController)
}}
  Create an account & install Git
{{/progress-section}}

{{#progress-section
  incrementProgress=(action 'incrementProgress' 'cloneProject' target=installationController)
}}
  Clone and setup Project
{{/progress-section}}

{{#progress-section
  incrementProgress=(action 'incrementProgress' 'versioning' target=installationController)
}}
  How to use Versioning
{{/progress-section}}

<强>组件/进展截面/ template.hbs

{{#way-point
  on-down=(action incrementProgress)
  class='l--m-b-800'
}}
  {{yield}}
{{/way-point}}

<强>组件/进度条/ template.hbs

<div class='progress-bar'>
  <div
    class='progress-bar__inner'
    style={{{concat "width: " barWidth "%;"}}}
  >
  </div>
</div>

<强>风格/ app.css

* {
  box-sizing: border-box;
}

.l--m-b-800 {
  margin-bottom: 800px;
}

.progress-bar {
  border: 1px solid gray;
  padding: 1px;
}

.progress-bar__inner {
  background-color: steelblue;
  height: 10px;
}

注意您可能需要使用the offset option调整每个progress-section上的路标所触发的操作。

Ember.js ProgressBar基于子路径页面滚动

1 个答案: