Ember路由和应用设计

Question

更新

我将用不同的方式表达我的问题，因为这可能更容易理解：--我需要更新来自单个服务器请求的2控制器模型，在给定"/ filter / xxxx“这样的特定路由(xxxx是发送请求的筛选器)的情况下执行该模型。

• 如何在路由和服务器请求之间建立连接？
• 当请求成功时，如何更新2控制器的模型？

原始帖子

我一直在寻找我在互联网上找到的关于Ember的每一本教程，搜索了大量文档丰富的Ember的网站，以及许多StackOverflow问题，但从未成功地实现了我正在寻找的目标。

基本上，我有一个应用程序，它包括一个Google，它显示了来自数据库的一些标记，还有一个过滤器部分，它允许用户过滤标记。

当用户单击筛选器时，请求将发送到服务器，并以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 /map
• 然后根据选择的过滤器更新MapController的模型(就像我实际使用"fastFilterDate“操作一样)
• 以及DateTimeSearchController的属性"date_begin_label“、"date_end_label”和"selected“，同时知道这些信息来自于MapController模型的相同请求(不知道我对这个模型是否清楚)。

在我的脑海中，我有过这样的场景:

• 每个过滤器都是一个路由，在具有{{#链接到}}的视图中生成，因此当您单击它时，URL将被更新并显示"/map/filter/xxxx“。
• 应用程序在map模板上显示了一个小加载程序。
• 它向MapController的模型发送一条消息，以便根据选择的过滤器进行更新(永远不知道如何做到这一点)
• 当我们得到响应时，它用标记更新MapController的模型，并用其他几个属性(date_begin_label、date_end_label和selected)更新date_begin_label。
• 使用新的标记自动更新MapView (我知道怎么做)
• 默认情况下，当应用程序第一次加载时，“今天”过滤器将自动设置为，而不需要更改URL (没有显示/map/ filter /map，只有/map)

当然，如果有人直接输入网址"http://xxxxxx.com/map/filter/xxx“，我希望它也能工作。我知道我必须配置我的服务器，以便它重定向到我的应用程序的位置，但应用程序必须显示正确的过滤器。

我肯定有个简单的方法，但我没办法找到.也许我该换个设计？

我不想使用-DATA来过滤我的标记，我真的想使用服务器API

谢谢!

Answer 1

您应该使用查询参数来处理过滤器。这就是他们的本意。当在控制器上更改查询参数时，模型会刷新。您不需要对过滤器进行路由，并且可以将过滤器作为查询param传递到链接到助手。

请参阅http://guides.emberjs.com/v1.10.0/routing/query-params/