3

私はこれを理解することができませんでした...

検索に基づいて連絡先のリストを表示するオートコンプリート ボックスを作成したいと考えています。私は現在、ユーザー用にこのコントローラーを持っています:

App.UsersController = Ember.ArrayController.extend({
        sortProperties: ['firstName'],
        sortAscending: true,
        isCreateUser: false,
        sortByDigital: false,
        sortByPhysical: false,
        sortDisplayAll: true,
        createUser: function() {
            this.set('isCreateUser', true);
        },

        motoDigital: function() {
            this.set('sortByDigital', true);
            this.set('sortByPhysical', false);
            this.set('sortDisplayAll', false);
        },
        motoPhysical: function() {
            this.set('sortByDigital', false);
            this.set('sortDisplayAll', false);
            this.set('sortByPhysical', true);
        },
        displayAll: function() {
            this.set('sortByDigital', false);
            this.set('sortDisplayAll', true);
            this.set('sortByPhysical', false);
        },
        searchText: null,

        searchResults: function() {
            var searchText = this.get('searchText');
            if(!searchText) { return; }

            var regex = new RegExp(searchText, 'i');
            return this.get('firstName').filter(function(firstName) {
                return firstName.match(regex);
            });
        }.property('searchText')
    });
  • 関連する部分はsearchTextとsearchResultsです。

次に、これをテンプレートとして使用します（長すぎないことを願っています）：

<script type="text/x-handlebars" data-template-name="users"> 
  <div class="span10 tableContainer">
  {{#linkTo 'users.new' class="btn btn-primary createUser"}}<i class="icon-plus icon-white"></i> New Contact{{/linkTo}}
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Display&nbsp&nbsp<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <a {{action displayAll}}>All Contacts</a>
            <a {{action motoDigital}}>Digital Subscriber</a>
            <a {{action motoPhysical}}>Physical Subscriber</a>
        </ul>
        {{input type="text" value=searchText placeholder="Search..."}}
            {{#each searchResults}}
                <a>{{firstName}}</a>
            {{/each}}
    </div>
    <div class="tableScrollable">
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="nameHead">Name</th>
          <th class="companyHead">Company</th>
          <th class="emailHead">Email</th>
        </tr>
      </thead>
      <tbody>
      <tr>
          <td class="name">&nbsp</td>
          <td class="company">&nbsp</td>
          <td class="email">&nbsp</td>
      </tr>
          {{#if sortByDigital}}
            {{#each model}}
                {{#if motoDigital}}
                    <tr>
                      <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                      <td class="company">{{company}}</td>
                      <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                    </tr>
                {{/if}}
            {{/each}}
          {{/if}}

          {{#if sortDisplayAll}}
            {{#each model}}
                 <tr>
                      <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                      <td class="company">{{company}}</td>
                      <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                 </tr>
            {{/each}}
          {{/if}}

          {{#if sortByPhysical}}
            {{#each model}}
                {{#if motoPhysical}}
                     <tr>
                          <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                          <td class="company">{{company}}</td>
                          <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                     </tr>
                 {{/if}}
            {{/each}}
          {{/if}}
      </tbody>
    </table>
   </div>
  </div>
  <div class="span3">
        {{outlet}}
  </div>
  </script>

このテンプレートを使用してリストを表示し、検索に基づいてそれ自体をフィルター処理したい...そして、http ://www.embercasts.com/episodes/building-an-autocomplete-widget-part- 経由でオートコンプリート用のコードを使用しています。 1

どんな助けでも大歓迎です！

4

1 に答える 1

1

何が間違っているのかを理解するのは少し難しいです。おそらくjsbinを投稿してみてください。

私が気づいたことの 1 つは、にsearchTextバインドされていないことvalueです。これを次のように変更することもできます。

{{input type="text" valueBinding=searchText placeholder="Search..."}}
于 2013-07-19T04:54:08.807 に答える