Question

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

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

用户希望通过位于顶部的选择菜单过滤项目列表。选择项目后，列表会自动过滤。过滤器的状态保留在启用用户的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"}}

我需要一台路由器，但我不知道如何写它。例如，我缺少的是能够在选择视图上编写{action}，这应该在“更改”时触发。

你能帮忙吗？

聚苯乙烯。我的管道中有与路由https://gist.github.com/2728699

相关的链接

Answer 1

处理此问题的一种简单方法是通过观察控制器中的选定值，然后使用send事件将更改后的值传递给路由器。在路由器中，您可以调用transitionTo来更改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
    }
})

您可能需要弄乱序列化并反序列化才能使其适用于您的案例。

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

1 个答案: