Ember.js(1.2.0):将id输入到包含的字段中

时间:2014-01-09 07:19:44

标签: javascript ember.js

我有一个场景,其中呈现包含的视图,我需要获取在最外层视图中指定的id并将其设置在包含的视图中。

HTML:

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    Contained Ember.TextField(how do I get id ? ):
    {{view Controls.ContainedField id="containedField"}}
    <br/>
    Direct Ember.TextField(gets id):
    <div>
    {{view Ember.TextField id="directField"}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="FieldContainer">
    {{view view.ContainedView}}
</script>

JavaScript的:

App = Ember.Application.create({});

Controls = Ember.Namespace.create();

Controls.FieldContainer = Ember.View.extend({
    ContainedView: undefined
})

Controls.ContainedField = Controls.FieldContainer.extend({
    templateName: 'FieldContainer',
    ContainedView: Ember.TextField.extend({})
})

App.IndexRoute = Ember.Route.extend({});

在我尝试的ContainedView: Ember.TextField.extend({})中:

ContainedView: Ember.TextField.extend({
    idBinding: 'parentView.id', // this
    elementIdBinding: 'parentView.id', // and this
    init: function() { // and event this
        var id = this.get('parentView.id'); // in order to set on the contained view
    }
})

但是对于我的生活,我无法获得主把手中指定的包含字段的ID。

任何帮助将不胜感激。以下是解释问题的jsFiddle:http://jsfiddle.net/EbenRoux/Xrb7Y/

2 个答案:

答案 0 :(得分:1)

覆盖Ember生成的id元素通常不是一个好主意 - Ember确定绑定仅通过这些ID工作。您可以做的是使用如here

所示的attributeBindings将您自己的属性附加到这些元素

答案 1 :(得分:0)

我找到了解决办法。通过为'root'parentView指定'elementId'而不是'id',我可以设置Id。

车把:

{{view Controls.ContainedField elementId="containedField"}}

JavaScript的:

Controls.ContainedField = Controls.FieldContainer.extend({
    templateName: 'FieldContainer',
    ContainedView: Ember.TextField.extend({
        init: function(){
            this._super();
            this.set('elementId', this.get('parentView.elementId') + 'Input');
        }
    })
})

jsFiddle with solution:http://jsfiddle.net/EbenRoux/Xrb7Y/5/