Question

我在看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

知道我为什么会这样做吗？

Answer 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注释导致一些奇怪的转义。

使用Ember中的文本框实时排序或过滤模型

1 个答案: