灰燼路由和應用程序設計

Question

更新

我用不同的方式表達我的問題，因為這樣可能更容易理解： 我需要更新來自單個服務器請求的2個控制器模型，該模型在給定的特定路由（例如“ / filter / xxxx”）下執行，其中xxxx是要發送的過濾器在請求中。

• 如何在路由和服務器請求之間建立連接？
• 請求成功后如何更新2控制器的模型？

原始郵件

我一直在尋找我在互聯網上找到的有關Ember的所有教程，搜索了有據可查的Ember的網站，以及許多StackOverflow問題，但從未成功實現我一直在尋找的東西...

基本上，我有一個應用程序，其中包含一個Google Map，其中顯示了一些來自數據庫的標記，還有一個允許用戶過濾標記的過濾器部分。

當用戶單擊過濾器時，請求將發送到服務器，並使用json響應（如下所示）答復：

markers:
    0: {id: 6, title: "blablablabla", coords: {lat: x.xxxxxxxxxxxxx, lon: xx.xxxxxxxxxxxxx}}
    [...]
    14: {id: 20, title: "blablabla", coords: {lat: x.xxxxxxxxxxxxx, lon: xx.xxxxxxxxxxxxx}}
date_begin_label: "March 1, 2015"
date_end_label: "April 1, 2015"
selected: "last-month"

目前，我已經創建了：

DateTimeSearch模板

<a href="#date-selection">{{ date_begin_label }} to {{ date_end_label }}</a>
<ul id="date-selection">
    <li><a href="/filter/today" {{ action 'fastFilterDate' 'today' }}>Today</a></li>
    <li><a href="/filter/yesterday" {{ action 'fastFilterDate' 'yesterday' }}>Yesterday</a></li>
    <li><a href="/filter/last-week" {{ action 'fastFilterDate' 'last-week' }}>Last Week</a></li>
    <li><a href="/filter/last-month" {{ action 'fastFilterDate' 'last-month'}}>Last Month</a></li>
    // also tried this
    {{#link-to 'map.fast-filter' 'today' tagName='li' href=no classNames='date-filter-today'}}
        {{#link-to 'map.fast-filter' 'today'}}Today{{/link-to}}
    {{/link-to}}
</ul>

地圖模板

<header>
    {{ view App.DateTimeSearchView }}
</header>
<div id="map">&nbsp;</div>

MapView.js

App.MapView = Ember.View.extend({
    contentDidChange : function () {
        this.mapUpdate();
    }.observes("controller.content"),

    mapUpdate : function () {
        var markers = this.get("controller.model");
        // update the map
    },
});

Router.js

App.Router.map(function () {
    this.resource("map", { path : "/map" }, function () {
        this.route("fast-filter", { path : "/filter/:filter"});
    });
});

MapRoute.js

App.MapRoute = Ember.Route.extend({
    model : function (filter) {
        filter = filter.length ? filter : "today";
        var data = App.MapMarker.filter(filter);
        // don't know how to give data.date_begin_label, data.date_end_label
        // and data.selected to DateTimeSearchController...
        return data.markers;
    },

    actions : {
        fastFilterDate : function (filter) {
            var controller = this.get("controller");
            App.MapMarker.filter(filter).then(function (response) {
                controller.set("model", response);
                // don't know how to give data.date_begin_label, data.date_end_label
                // and data.selected to DateTimeSearchController...
            });
        }
    }
});

MapMarker.js

App.MapMarker = Ember.Object.extend({});
App.MapMarker.reopenClass({
    filter  : function (filter) {
        var path = "/api/filter/" + filter;
        return new Ember.RSVP.Promise(function (resolve, reject) {
            Ember.$.getJSON(path)
                .success(function (response) {
                    response.markers = response.markers.map(function (child) {
                        return App.MapMarker.create(child);
                    });
                    Ember.run(null, resolve, response);
                })
                .error(function (xhr, text_status, error) {
                    Ember.run(null, reject, error);
                })
            ;
        }, "MapMarker::filter::" + path);
    }
});

DateTimeSearchController.js

App.DateTimeSearchController = Em.Controller.extend({
    date_begin_label    : null,
    date_end_label      : null,
    selected            : null
});

DateTimeSearchView.js

App.DateTimeSearchView = Em.View.extend({
    templateName    : "datetime-search",
    tagName         : "section",
    idName          : "filter-section",

    date_begin_label    : Em.computed.alias("controller.date_begin_label"),
    date_end_label      : Em.computed.alias("controller.date_end_label"),
    selected            : Em.computed.alias("controller.selected")
});

我需要一些東西：

• 當用戶單擊“今天”過濾器時，URL必須顯示：/ map / filter / today

• 然后，MapController的模型根據選擇的過濾器進行更新（就像我實際上在執行“ fastFilterDate”操作一樣）

• 而且，DateTimeSearchController的屬性“ date_begin_label”，“ date_end_label”，“ selected”也知道這些信息來自與MapController模型相同的請求（不知道我對此是否清楚）。

在我看來，我遇到了這種情況：

• 每個過濾器都是一條路線，該路線在視圖中使用{{＃link-to}}生成，因此當您單擊它時，URL會更新，並顯示“ / map / filter / xxxx”

• 該應用程序在地圖模板上顯示了一個小加載程序

• 它將消息發送到MapController的模型，以便可以根據所選過濾器對其進行更新（從未發現如何執行此操作）

• 當我們得到響應時，它將使用標記更新MapController的模型，並使用其他幾個屬性（date_begin_label，date_end_label和selected）也更新DateTimeSearchController。

• MapView會使用新標記自動更新（我知道該怎么做）

• 默認情況下，在首次加載應用程序時， 無需更改URL即可自動設置“今日”過濾器（不顯示/ map / filter / today，而僅顯示/ map）

當然，如果有人直接輸入URL“ http://xxxxxx.com/map/filter/xxx ”，我希望它也能正常工作。 我知道我必須配置服務器，以便它重定向到我的應用程序的位置，但是該應用程序必須顯示正確的過濾器。

我敢肯定有一個簡單的方法可以做到這一點，但是我找不到它……也許我應該設計不同的東西嗎？

我不想使用EMBER-DATA來過濾我的標記，我真的想使用SERVER API

謝謝！

Answer 1

您應該使用查詢參數來處理過濾器。 這就是他們的目的。 在控制器上更改查詢參數后，模型將刷新。 您不需要過濾器並進行路由，並且可以將過濾器作為查詢參數傳遞給鏈接到幫助器。

參見http://guides.emberjs.com/v1.10.0/routing/query-params/