Emberjs,数据源,twitter bootstrap typeahead

Question

虽然这可能特定于"预先"状态,并且我的示例具有静态内容,但实际上这将适用于"数据源"的任何引导程序使用.我希望有一天当我长大后使用动态内容为我的预先实现,所以我现在尝试绑定方式:

Ember.TextField.reopen({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'dataSourceBinding:data-source'],
    'dataSourceBinding': Ember.Binding.oneWay('App.AddStoreTemplateController.statesArray')
});

我有一个带有connectOutlets的路由器,它附加了我的模板:

{{view Ember.TextField elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray"}}

我的控制器:

    AddStoreTemplateController: Ember.ArrayController.extend({
            statesArray: ['Alabama', 'Washington']
    }),

我期望在HTML中呈现的内容:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="['Alabama', 'Washington']">

它实际呈现在HTML中的内容:

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray">

Typeahead docs http://twitter.github.com/bootstrap/javascript.html#typeahead

非常感谢.我真的很喜欢EmberJS !!

Answer 1

在摆弄了这个之后,我想出了一个简单的方法来做到这一点.它不需要第三方库,您可以使用Ember.TextField保持输入漂亮:

我创建了一个新的扩展TextField对象来保持分离:

Ember.TextFieldTypeahead = Ember.TextField.extend({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'data-source'],
    'data-source': function(){
            return JSON.stringify(["Alabama", "Washington"]);
    }.property()
});

然后在我的模板中:

{{view Ember.TextFieldTypeahead elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source=on}}

事情很好.对我来说只有令人困惑的事情,这可能是一个Ember bug或者只是我的框架的noob状态,是模板中的data-source =可以是任何东西,它仍然引用我声明的函数.只是将它作为"数据源"留在模板中会在把手构建上产生错误,所以我只是选择将值设置为"on"所以我在6个月的时间内不会因为某些原因重新访问代码而感到困惑.好奇.

我也猜测我可以扩展它以更多地观察"价值",然后在价值变化中填充'数据源'属性,无论我的服务器响应什么ajax调用以满足动态需求.