Javascript Emberjs，数据源，推特引导类型

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

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

我有一个带有ConnectOutlet的路由器，它连接了我的模板：

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

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

我的控制器：

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

formattedDataSource: function(){
  .. format your states array as a string or dump to json...
}.property()

我希望看到以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">

提前打印文档

---

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

为此，我不会使用

Ember.TextField

。你可以这样做：

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

---

您也可以这样做（当您希望在从服务器键入时动态加载数据时）：

车把的外观如下：

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

结果:

---

在对这一点做了更多的修改之后，我找到了一个简单的方法来实现这一点。它不需要第三方库，您可以使用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.TextField elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray"}}

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

事情进展顺利。唯一让我困惑的是，这可能是一个余烬bug，也可能只是我框架的noob状态，模板中的data source=可以是任何东西，它仍然引用我声明的函数。在模板中将其保留为“数据源”会在Handlebar构建中产生错误，因此我选择将该值设置为“开”，这样在6个月后，当我出于某种原因重新访问代码时，我不会感到困惑。好奇

---

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

尝试此方法时，我收到一个错误：“未捕获错误：断言失败：属性必须是数字、字符串或布尔值，而不是阿拉巴马、华盛顿”-我只返回[“阿拉巴马”、“华盛顿”]从我的控制器功能来看…我非常震惊，我需要一个库来做这样简单的事情。在我接受答案之前，我会再等一段时间。我用过这个，但在最新的Ember RC中，它被破坏了。知道为什么吗？不。我已经将我的Ember实现转换为AngularJS，从那以后就再也没有回头看。我想要有一天我长大了……爱这句话：）