如何将标记的输入文本字段值绑定到 Ember 中的模型属性答案

【问题标题】：How to bind tagged input text field value to a model property in Ember如何将标记的输入文本字段值绑定到 Ember 中的模型属性
【发布时间】：2013-11-06 01:01:51
【问题描述】：

我有一个 autocompleteView，我用它来生成一个支持 typeahead 的 TextField，并希望根据模型在其“tags”属性中设置的内容，用一些初始值填充它。 autocompleteView 是嵌套的。

我将bootstrap-tags.js 用于标记输入和样式化下拉菜单，App.ItemEditView 的processChildElements 函数中的以下方法实例化标记输入元素。我也在使用Ember 1.0.0 和Ember-Data 1.0.0-beta.4+canary.c15b8f80

我知道我可以（但不应该）初始化 'didInsertElement' 方法中的值 this.set('value', this.get('parentView.controller.model.tags') 不允许观察 mdoel？我什至不确定以这种方式访问模型是否有效/可取！

如何将此自动完成视图绑定到模型的“标签”属性并观察它的变化？

App.ItemEditView = Ember.View.extend({
    autocompleteView: Ember.TextField.extend({
        didInsertElement: function() {
            console.log(this.get('parentView.controller.model.tags').toString());
            Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
        },
        processChildElements: function() {
            this.$().tag({
                placeholder: 'tags input',
                //enable typeahead by specifying the source array
                source: ['test', 'this', 'and', 'that'],
            });
        },
    })
});

App.Router.map(function() {
    this.resource('inventory', function() {
        this.resource('items', function() {
            this.resource('item', { path: ':item_id' }, function() {
                this.route('edit');
            });
        });
    });
});

我的模板如下所示：

<script type="text/x-handlebars" data-template-name="items">
    <div id="item">
        {{outlet}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="item">
    <div id="item">
        {{outlet}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="item/edit">    
    <div id="tags">
        {{view view.autocompleteView valueBinding="view.valueTags"}}
    </div>
</script>

<script type="text/x-handlebars">
    {{outlet}}
</script>

【问题讨论】：

标签： javascript ember.js ember-data

【解决方案1】：

我没有正确（或根本没有）将上下文传递给我的嵌套视图。我应该将嵌套TextField 视图的value 属性绑定到当前上下文（即当前模型）的tags 属性，这恰好是App.ItemEditController 提供给我们的模型，例如所以：

{{view view.autocompleteView valueBinding=this.tags}}

就是这样，这解决了它！

【讨论】：