jquery - 在 ember js 中创建一个 jquery 滑块

Question

我正在尝试创建一个简单的 jquery 滑块，但没有运气。我查看了许多在这里和其他网站上看起来相关的问题，但似乎没有任何效果。我已经更改了几次代码，但目前我有这个。

App.SliderView = Ember.View.extend({
      didInsertElement: function() {
         this.$().slider({
             range: "min",
             value: 50,
             min: 1, 
             max: 100
         });
     } 
  });

{{#view App.SliderView}}
    {{/view}}

感谢您提供任何帮助或建议。

Answer 1

试试这个：https ://github.com/RVenkatesh/Ember-slider 。这个库是使用 Ember 视图构建的。它使您能够在任何 Ember 视图中包含不同类型的滑块。

Answer 2

目前这对您不起作用，因为您使用的是视图助手的块形式。要使您的示例正常工作，您必须使用：

{{view App.SliderView}}

但是为了鼓励更多的灵活性，您应该采取以下措施：

App.SliderView = Ember.View.extend({
    templateName : "slider",
    elementSelector : ".slider",
    didInsertElement: function() {
        this.$(this.get("elementSelector")).slider({
         range: "min",
         value: 50,
         min: 1, 
         max: 100
        });
    } 
});

以及对应的模板：

<div class="slider"></div>

这将使您能够在需要时轻松地向滑块添加额外的标记。您甚至可以进一步扩展这种方法，并使滑块的属性成为视图的一部分。

Answer 3

您可以尝试为滑块添加一个 div 来挂钩。所以你的模板是：

{{#view App.SliderView}}
  <div class="sliderDiv"></div>
{{/view}}

然后didInsertElement你会打电话：

this.$('.sliderDiv').slider({ ... });

Answer 4

如果您使用的是 ember-cli，请尝试仅使用 ember-slider：https ://github.com/yinaw/ember-slider