0

我正在观看 Ember 截屏视频并偶然发现了自动完成小部件。我试图实现类似的东西，但它似乎不起作用。

我正在使用 $.getJSON 获取数据，并且我想使用文本框对其进行过滤。

这是我尝试过的，

App = Ember.Application.create();

App.Model = Ember.Object.extend({

});

App.IndexRoute = Ember.Route.extend({
    redirect : function() {
        this.transitionTo('users');
    }
});

App.UsersController = Ember.ArrayController.extend({

    filteredContent : function() {
        var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

        return this.get('model').filter(function(item) {
            return regex.test(item.name);
        });
    }.property('searchText', 'model')
});

App.Users = App.Model.extend({
    id : "",
    name : ""
});

App.UsersRoute = Ember.Route.extend({
    model : function() {
        return App.Users.findAll();
    },
    setupController : function(controller, model) {
        controller.set('model', model);
    }
});


App.Users.reopenClass({
    findAll : function() {
        return $.getJSON("user.php", function(data) {
            return data.map(function(row) {
                return App.Users.create(row);
            });
        });
    }
});

App.Router.map(function() {
    this.resource("users", {
        path : "/users"
    });
});

这是我的HTML，

       <body>
        <script type="text/x-handlebars" data-template-name="users">

            {{view Ember.TextField value=searchText}}
            <button {{action last}}>filter</button>
            <button {{action refresh}}>refresh</button>

             {{#each item in content }}
             <tr><td>
             <p> {{item.name}}</p>
             </td></tr>
            {{/each}}
        </script>

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

    </body>

我实际上被困在应该在哪里进行更改，我只需要一些指示。

更新：即使我得到了预期的结果，但我得到了

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

知道为什么我会得到这个吗？

4

1 回答 1

1

我认为您会在 $.getJSON 的承诺兑现之前返回。尝试更改您的 App.User.findAll 以便它从成功回调内部返回结果。具体来说，您的 findAll 实现可能如下所示：

App.Users.reopenClass({
  findAll: function() {
    return $.getJSON("https://api.github.com/users/rjackson/repos", function(data) {
      return data.map(function(row) { return App.Users.create(row); });
    });
  }
});

另外，我认为您不需要手动创建 ArrayProxy 对象。从您的路线模型挂钩返回一个数组就足够了。

我在这里对您的原始文件（包括使用示例 JSON 端点）进行了一些额外的调整：http: //jsbin.com/oWUBeMu/3/edit

更新时间：2013/08/30

selectedIndex 错误是由“用户”模板中的 HTML 注释引起的。车把注释应该是 {{! }} 或者 {{！ - - }}。解析模板时，html 注释会导致一些奇怪的转义，导致模板无法正确绑定到属性。

于 2013-08-29T04:01:01.540 回答