3

虽然这可能特定于“提前输入”情况，并且我的示例具有静态内容，但实际上这将适用于“数据源”的任何引导程序使用。我希望有一天我长大后使用动态内容来实现我的预输入，所以我现在正在尝试绑定方式：

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 文档 http://twitter.github.com/bootstrap/javascript.html#typeahead

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

4

3 回答 3

5

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

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

于 2012-12-02T23:33:42.603 回答
2

您还可以执行以下操作（当您希望在从服务器键入时动态加载数据时）：

余烬引导

EEPD.EbedMedicationArticleTypeAhead = Bootstrap.Forms.TypeAhead.extend({
    init: function () {
        this._super();

        this.set('idProperty', 'id');
    },

    valueChanged: function () {
        var id = this.get('value');
        var self = this;

        var label = this.get('_childViews')[1].$()
                        .val();

        if (Ember.empty(label) && !Ember.empty(id)) {
            var articleDescription = this.get('item.articleDescription');
            self.get('_childViews')[1].$()
                .val(articleDescription)
                .change();
        }
    } .observes('value'),

    getLabel: function (item) {
        return '%@ (%@)'.fmt(Ember.get(item, 'description'), Ember.get(item, 'amount'));
    },

    getQueryPromise: function (query) {
        //get some data from SignalR
        return $.connection.ccprCardioArticles.server.getAllByDescriptionLike(query);
    }
});

车把将如下所示：

{{view EEPD.EbedMedicationArticleTypeAhead
      label="Medicament:"
      name="articleNumber"}}

结果：

在此处输入图像描述

在此处输入图像描述

于 2012-11-30T08:13:00.847 回答
0

为此，我不会使用Ember.TextField. 您可以执行以下操作：

<input ... data-items="4" {{bindAttr data-source="formattedDataSource"}}/>

在您的控制器中：

formattedDataSource: function(){
  .. format your states array as a string or dump to json...
}.property()
于 2012-11-30T04:57:22.880 回答