Question

我正在尝试使用Zurb基础框架中的范围滑块和Ember。我想要一个输入字段旁边的滑块，它们都显示相同的值相互更新，这样用户就可以手动输入数字或使用滑块设置过去玩过的游戏的分数。 / p>

我的模板如下所示：

{{input type="text" id="new-game-score" value=newGameScore}}
<div class="range-slider" data-slider={{newGameScore}} data-options="start: 0; end: 16;">
  <span class="range-slider-handle" tabindex="0" role="slider"></span>
  <span class="range-slider-active-segment"></span>
</div>

在控制器中，我正在调用this.get('newGameScore');来获取创建模型的值。

当我打开模板时，我得到的文本输入行为与我期望的一样。它允许设置模型创建的分数。它旁边的滑块的data-slider - 属性会正确更新，但它不会改变滑块的外观，我根本无法移动滑块。当我将newGameScore设置为在控制器中返回数字的函数时，滑块和输入字段都以设定值开始，我可以移动滑块。移动它不会更改输入字段的值，但在文本字段中输入数字会调整data-slider - 值，而滑块上没有任何可见的更改。用于创建新模型的编号是文本输入中的编号。

我正在使用ember-cli并使用ember install ember-cli-foundation-sass安装基础。我有

var app = new EmberApp({
  'ember-cli-foundation-sass': {
    'modernizr': true,
    'fastclick': true,
    'foundationJs': 'all'
  }
});

在我的Brocfile中，相应的视图如下所示：

export default Ember.View.extend({
  didInsertElement: function() {
    this.$().foundation();
  }
});

控制器是一个ArrayController，模板显示所有具有分数的游戏。如果可能的话，我想保持这种方式。

我开始使用zurb基础文档： http://foundation.zurb.com/docs/components/range_slider.html

并找到了一个更复杂但密切相关的问题的以下解决方案： http://danahartweg.com/foundation-5-sliders-in-dropdowns-using-emberjs

但我无法弄清楚如何将滑块与newGameScore正确同步。文章开头的http://danahartweg.com/foundation-5-sliders-in-dropdowns-using-emberjs指出，使用基础滑块的余烬很容易做到。所以我假设我不必编写自定义的on-change-functions来解决我的问题，但也许有更多经验丰富的人可以从文章的底部找到解决方案，虽然在我看来这只是需要下拉列表和滑块的组合。

感谢您的阅读以及对此的任何想法。问候，安迪

Answer 1

自从我使用Ember应用程序以来已经有一段时间了，但我确实记得你在这里提到的一些怪癖。

在我的文章中，我对滑块值和输入值进行了数据绑定。不过，老实说，让data-slider通过display_selector选项提供输入而不进行任何绑定可能会更好。自从我使用这段代码以来已经有一段时间了，所以它可能是我最初尝试过的并且失败了。似乎总体上可能更好，因为它会让范围滑块本身的display_selector选项保持滑块的内部状态不变。

就正确使用Ember数据绑定而言，html内容很容易（正如您所发现的那样），但元素属性有点棘手。您必须使用bind-attr语法：{{bind-attr data-slider="newGameScore"}}

在ember中创建一个新模型，其中zurb基础范围滑块绑定到属性

1 个答案: