[英]Emberjs, data-source, twitter bootstrap typeahead
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: 我有一个带有connectOutlets的路由器,它附加了我的模板:
{{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: 我期望在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: 它实际呈现在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 Typeahead docs http://twitter.github.com/bootstrap/javascript.html#typeahead
Thanks so much. 非常感谢。 I really enjoy EmberJS!!
我真的很喜欢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:
它不需要第三方库,您可以使用Ember.TextField保持输入漂亮:
I created a new extended TextField object to keep things separate: 我创建了一个新的扩展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()
});
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.
对我来说只有令人困惑的事情,这可能是一个Ember bug或者只是我的框架的noob状态,是模板中的data-source =可以是任何东西,它仍然引用我声明的函数。 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.
只是将它作为“数据源”留在模板中会在把手构建上产生错误,所以我只是选择将值设置为“on”所以我在6个月的时间内不会因为某些原因重新访问代码而感到困惑。 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. 我也猜测我可以扩展它以更多地观察“价值”,然后在价值变化中填充'数据源'属性,无论我的服务器响应什么ajax调用以满足动态需求。
You can also do something like this (when you want to load the data dynamically as you type from the server): 你也可以这样做(当你想从服务器输入时动态加载数据):
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);
}
});
the handlebar will look like this: 车把看起来像这样:
{{view EEPD.EbedMedicationArticleTypeAhead
label="Medicament:"
name="articleNumber"}}
Result: 结果:
For this I wouldn't use the Ember.TextField
. 为此,我不会使用
Ember.TextField
。 You could do something like: 你可以这样做:
<input ... data-items="4" {{bindAttr data-source="formattedDataSource"}}/>
In your controller: 在你的控制器中:
formattedDataSource: function(){
.. format your states array as a string or dump to json...
}.property()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.