Ember.js 使用EmberJS保存选择菜单的状态

在给定路线的情况下，EmberJS是否可以检索选择框（也称为下拉菜单）的状态

下面是我的用户故事，非常简单：

用户希望通过位于顶部的选择菜单过滤项目列表。 选择项目后，列表将自动过滤。过滤器的状态保存在启用用户的URL中 检索所选内容

URL: http://example.com/#/2   -> where 2 corresponds to an item in the filter

------------------------------
| Select an item         \/  |
------------------------------

* Item 1
* Item 2
* Item 3

以下是我的选择视图：

App.CitySelectView = Ember.Select.extend({
    contentBinding: "App.cityController.cities",
    optionLabelPath: "content.name",
    optionValuePath: "content.uid",
    selectionBinding: "App.cityController.selected"
});

模板应该是这样的

{{view App.StateSelectView id="form-select-state" prompt="Select an item"}}

我需要一个路由器，但我不知道如何写它。例如，我缺少的是在Select视图上编写一个{action}的能力，它应该在“change”时触发

你能帮忙吗

---

注：我的管道中有这个与路由相关的链接。处理这个问题的一个简单方法是观察控制器中的选定值，然后使用发送事件将更改后的值传递给路由器。在路由器中，您可以调用Transitionon来更改url并执行过滤

在App.CityController中：

selectedChanged: function() {
    App.router.send('filterDropDown', this.get('selected'));
}.observes('selected')

在App.Router中，发送到路由器的已定义事件称为：

filterDropDown: function(router, context) {
    router.transitionTo('filter', context.uid);  //pass the uid as url param
}

在enter事件中定义路由并处理筛选：

filter: Em.Route.extend({
    router: '/:selected',
    enter: function(router, context) {
        // Handle filtering here, with selected uid as context.selected
    }
})

---

您可能需要处理序列化和反序列化以使其适用于您的案例。

由于您的选择视图绑定到控制器的

selected

属性，因此不需要向该属性添加事件处理程序。在cityController中，您可以观察到对

selected

属性的更改，然后当它更改时，您可以在路由器上调用一个方法，然后转换到适当的路由，将新的

selected

对象作为该路由的上下文传递。