0

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

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

这样，正如您猜想的那样，我{{view.somethingToPrint}}在 span 标签内打印了 N 次数组内容。

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

我想过使用以下之一：

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

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

4

1 回答 1

2

这是一个示例，为了不留下未回答的问题；）

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()
});
于 2012-08-15T10:46:41.253 回答