Question

我最近建立了一个基于Emberjs和twitter bootstrap的页面。该页面是使用令人敬畏的emberjs绑定引擎动态构建的。我目前有一个控制器，有界视图在html中呈现一个列表。

{{#each App.myArrayController}}
       {{#view App.MyItemListView contentBinding="this"}}
           <span>{{view.somethingToPrint}}</span>
       {{/view}}
{{/each}}

这样，你猜我在span标签中打印了{{view.somethingToPrint}}数组内容的N倍。

现在我正在考虑渲染一个jQuery UI滑块列表。我的问题是，鉴于它们将动态生成，我何时必须调用$(".slider").slider(); init方法才能使其“生效”。实际上，通常的方法是什么？

我想过使用以下一个：

使用jQuery的“livequery”插件，透明地初始化任何添加的项目。缺点是速度慢，可能无法在每个浏览器上运行。
在我创建滑块的每一行嵌入一个完整的脚本标记，以便添加脚本并输入内容。
在我的App.myArrayController上添加一个观察者，如果发生任何变化，它将触发$(".slider").slider();。

但我仍然不相信那些。我习惯使用twitter的Bootstrap，在大多数情况下，不需要混淆后渲染脚本调用（这是正确的“bootstrap”）。

Answer 1

这是一个例子，为了不留下未答复的问题;）

jsfiddle：http://jsfiddle.net/Sly7/bHL66/

<强>的javascript

App = Ember.Application.create();

App.myArrayController = Ember.ArrayController.create({
  content: [
    Ember.Object.create({firstName: "Gart", lastName: "Algar"}),
    Ember.Object.create({firstName: "Wayne", lastName: "Campbell"})
  ]
});

App.MyItemListView = Ember.View.extend({

  didInsertElement: function(){
    this.$().hide(); 
    this.$().fadeIn(1000);        
  },

  somethingToPrint: function(){
    return this.get('content.firstName') + ' ' + this.get('content.lastName');        
  }.property()
});

在Ember Js构建视图中初始化jQuery UI项

1 个答案: