Emberjs，数据源，twitter bootstrap类型 [英] Emberjs, data-source, twitter bootstrap typeahead

问题描述

虽然这可能是针对开头的情况，我的示例具有静态内容，但这真的适用于任何引导使用数据源。我想有一天，当我长大使用动态内容为我的头脑实现，所以我尝试绑定的方式现在：

  Ember .textField.reopen（{
 //添加一些引导特定的东西
 attributeBindings：['data-provide'，'data-items'，'dataSourceBinding：data-source']，
' dataSourceBinding'：Ember.Binding.oneWay（'App.AddStoreTemplateController.statesArray'）
}）; 
  

我有一个连接了我的模板的connectOutlets的路由器：

  {{view Ember.TextField elementId =stateplaceholder =NY / New YorkvalueBinding =statedata-provide =typeaheaddata-items = 4data-source =App.router.addStoreTemplateController.statesArray}} 
  

我的控制器： / p>

  AddStoreTemplateController：Ember.ArrayController.extend（{
 statesArray：['Alabama'，'Washington'] 
}），
  

我期望看到HTML中呈现的内容：

 < input id =stateclass =ember-view ember-text-fieldplaceholder =NY / New Yorktype =textdata -provide =typeaheaddata-items =4data-source =['Alabama'，'Washington']> 
  

HTML中实际呈现的内容：

 < input id =stateclass =ember-view ember-text-fieldplaceholder =NY / New Yorktype =textdata-provide =typeahead data-items =4data-source =App.router.addStoreTemplateController.statesArray> 
  

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

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

解决方案

在这一点点之后，我想出了一个简单的方法来做到这一点。它不需要第三方库，您可以使用Ember.TextField来保持输入的美观：

我创建了一个新的扩展TextField对象来保持分开： / p>

  Ember.TextFieldTypeahead = Ember.TextField.extend（{
 //添加一些引导特定的东西
 attributeBindings ：['data-provide'，'data-items'，'data-source']，
'data-source'：function（）{
 return JSON.stringify（[Alabama华盛顿]）; 
} .property（）
}）; 
  

然后在我的模板中：

<$ p $ data =4data-source =4data-source =4data-source =4 on}}

事情运转正常。只有混乱的东西给我，这可能是一个Ember的错误，或者只是我的noob状态的框架，是data-source =在模板中可以是任何东西，它仍然引用我声明的功能。只是把它作为模板中的数据源，会在句柄构建中产生一个错误，所以我只是选择使这个值on，所以我不会在6个月的时间里混淆代码，因为某些原因。好奇。

我也猜测我可以扩展这个更多观察值，然后在值更改中使用任何ajax调用填充数据源属性我的服务器响应满足动态需求。

While this may be specific to the "typeahead" situation, and my example has static content, really this would apply to any bootstrap usage of "data-source". I want to someday when I grow up use dynamic content for my typeahead implementation, so am trying the binding way for now:

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

I have a router with connectOutlets which attaches my template:

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

My controller:

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

What I expect to see rendered in 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']">

What it actually renders in 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

Thanks so much. I really enjoy EmberJS!!

解决方案

After fiddling with this a bit more, I figured out an easy way to do this. It doesn't require a 3rd party library and you can use Ember.TextField to keep your inputs pretty:

I created a new extended TextField object to keep things separate:

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()
});

Then in my template:

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

Things worked fine. Only confusing thing to me, and this may be an Ember bug or just my noob status of the framework, is that data-source= in the template can be anything, it still references the function that I declared. just leaving it as "data-source" in the template yields an error on the handlebars build, so I just opted to make the value "on" so I'm not confused in 6 months time when I revisit the code for some reason. Curious.

I'm also guessing I can extend this even more to observe "value" and then on value change populate the 'data-source' property with whatever ajax call my server responds with to satisfy the dynamic requirement.

这篇关于Emberjs，数据源，twitter bootstrap类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！