4

次の問題で、私は何日も立ち往生しました。私のユースケースは、何百万ものアドレスを持つデータベースがあることです。それらを検索し、結果のリストを表示し、後で単一のアドレスに関する情報を表示したいWebアプリケーションから。重要な目標の 1 つは、検索基準を URL の一部として表すことです。そうすれば、ユーザーは以前の検索に戻ることも、URL を操作して検索を構築することもできます。したがって、次のような URL が必要です。

http://localhost/#/searchresults?lastname=king&firstname=stephen&city=somecity

この種の URL を処理するようにルーターをセットアップすることができません。すべての試みは行き止まりに終わった。Ember を /searchresults ルートに入れる方法と、RESTAdapter を使用してこれらのフィルター条件を転送する方法は?

4

3 に答える 3

5

直感的なピクセルからの回答に基づいて、次の解決策を思いつきました。

次の URL を作成します: http://somedomain.com/#/searchresults/?lastname=king&firstname=stephen&city=somecity

この URL の構成方法については、ここでは説明しません。私の場合、フォームといくつかのイベント ハンドラーを含む独自のビューを使用します。

動作するようになったコードは次のようになります。

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

App.SearchresultsRoute = Ember.Route.extend((function() {
    var deserializeQueryString = function (queryString) {
        if(queryString.charAt(0) === "?")
            queryString = queryString.substr(1);

        var vars = queryString.split('&'),
            i = 0, length = vars.length,
            outputObj = {};

        for (; i < length; i++) {
            var pair = vars[i].split('=');
            outputObj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
        }
        return outputObj;
    };

    return {
          model: function(param) {
            var paramObj = deserializeQueryString(param.dynamic);
            return App.Searchresult.find(paramObj);
          }
        };
    })()
);

App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.create({
        namespace: 'api'
    })
});

App.Searchresult = DS.Model.extend({
    lastname: DS.attr('string'),
    firstname: DS.attr('string'),
    street: DS.attr('string'),
    hno: DS.attr('string'),
    zip: DS.attr('string'),
    city: DS.attr('string'),
    country: DS.attr('string'),
    birthdate: DS.attr('string')
});

これにより、REST API への HTTP GET 要求が生成されます。

http://somedomain.com/api/searchresults?lastname=king&firstname=stephen&city=somecity

私の REST API は次のように応答します。

{"searchresults":
    [{"id":"2367507","lastname":"King","firstname":"Stephen","street":"Mainstreet.","hno":"21" ...},
     {"id":"3222409","lastname":"King","firstname":"Stephen","street":"Broadway","hno":"35" ...}
    ]}

そして、これはこのテンプレートで視覚化されます:

<h2>Searchresults</h2>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Street / Hno</th>
            <th>City</th>
            <th>Birthyear</th>
        </tr>
    </thead>
    <tbody>
    {{#each item in controller}}
        <tr>
            <td>{{item.firstname}} {{item.lastname}}</td>
            <td>{{item.street}} {{item.hno}}</td>
            <td>{{item.zip}} {{item.city}}</td>
            <td>{{item.birthdate}}</td>
        </tr>   
    {{/each}}
    </tbody>
</table>

カスタムデシリアライザーを使用する必要のない、よりエレガントな方法を誰かが見つけた場合は、喜んでソリューションを更新します。http://somedomain.com/#/searchresults/king/stephen/somecityを示唆する (他の) ダニエルによって提供された回答は、私の場合には部分的ではありません。基準/フィルター。ユーザーは通常、それらのいくつかを埋めることを選択します。

この例は、ember-data リビジョン: 12 および Ember 1.0.0-RC.3 に基づいています。

于 2013-05-12T13:59:49.973 に答える
3

ember データを利用するには、次のようにします。次のようなモデルがあるとします。

App.SearchResult = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  city: DS.attr('string')
});

次に、ルートのモデル フックで次のようにします。

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params){
    return App.SearchResult.find({firstName:params.firstName,lastName:params.lastName,city:params.city})
  }
});

このようにして、RESTAdapter はあなたの例のようなリクエストを自動的に発行します:

http://localhost/#/searchresults?firstname=xxx&lastname=xxx&city=xxx

それが役に立てば幸い

于 2013-05-12T11:17:57.580 に答える
0

ニュースページ番号に関する情報を含む URL を取得しました。これに応じて、送信と ajax 呼び出しが行われます。私のルーターは次のようになります。

App.Router.map(function() {
    this.resource('news', { path: '/n/:id' });
});

しかし、次のようにすることもできます。

App.Router.map(function() {
        this.resource('searchresults', { path: '/searchresults/:lastname/:firstname/:city' });
    });

URL は次のようになります。

http://localhost/#/searchresults/king/stephen/somecity

次に、次のように指定します。

App.SearchresultsRoute = Em.Route.extend({
    model: function(params) {
        var lastname = params.lastname;
            var firstname = params.firstname;
            var city = params.city;
            someFunction(lastname, firstname, city);
    }
});

私の答えがお役に立てば幸いです。良い１日を！

于 2013-05-12T11:09:29.197 に答える