Question

我在my_controller中有一个函数来获取数组中的名称列表，我的模板中有一个使用my_controller中的数组的typeahead bootstrap输入：

my_controller：

    names: function(){
        var names;
        Ember.$.ajax({
            type: 'GET',
            url: '/users',
            async: false,
            success: function(response){
                names = response["users"];
            },
            error: function(error){
                console.log('ERROR: ' + error);
            }
        });
        return names;
    }.property('names')

把手模板

   <input class="typeahead" type="text" placeholder="States of USA" {{bind-attr data=names}}>

   $('#people-search .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    prefetch: $(this).get("data") //also tried $(this).data and $(this).attr("data")
   });

如何正确获取js函数中的有界attr？有没有办法直接在typeahead ajax初始化程序中调用names变量？

Answer 1

您应该将您的预先初始化移动到您的视图中。要从控制器访问数据，它看起来类似于以下内容（如果使用Ember-CLI，语法可能会有所不同）：

App.MyView = Ember.View.extend({
    didInsertElement: function() {
        var names = this.get('controller.names');
        Ember.$('#people-search .typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1,
                prefetch: names
        });
    }
});

此代码未经测试，但总体思路应该存在。重要的是您通常使用this.get('controller')

从视图访问控制器

Answer 2

您可以创建可重复使用的预先输入组件

App.TypeaheadCompComponent = Ember.Component.extend({
  makeItTypeAhead: function(){
    var names = this.get('namesInsideComp');
    this.$('.typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1,
      source: names 
    });
  }.on('didInsertElement')
});

使用相应的组件模板

  <script type="text/x-handlebars" id="components/typeahead-comp">
    <input class="typeahead" type="text" placeholder="Names" />
  </script>

然后在任何其他模板中使用它，如下所示

{{ typeahead-comp namesInsideComp=names}}

jsbin上的工作示例here

ember.js - Handlebars模板中JS函数中的引用控制器变量

2 个答案: