javascript - Emberjs，数据源，twitter bootstrap typeahead

Question

虽然这可能特定于“预先输入”的情况，并且我的示例具有静态内容，但实际上这适用于“数据源”的任何 Bootstrap 使用。我想有一天当我长大后使用动态内容来实现我的预输入，所以我现在尝试绑定(bind)方式:

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"}}

我的 Controller :

    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">

预先输入文档 http://twitter.github.com/bootstrap/javascript.html#typeahead

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

Answer 1

在稍微摆弄了一下之后，我想出了一个简单的方法来做到这一点。它不需要第 3 方库，您可以使用 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 错误或只是我的框架的新手状态，模板中的 data-source= 可以是任何东西，它仍然引用我声明的函数。只是将其保留为模板中的“数据源”会在 handlebars 构建时产生错误，因此我只是选择将值设置为“on”，这样当我出于某种原因重新访问代码时，我不会在 6 个月内感到困惑。好奇。

我还猜测我可以进一步扩展它以观察“值”，然后在值更改时使用我的服务器响应的任何 ajax 调用填充“数据源”属性以满足动态要求。