javascript - 根据路由 URL 设置 select 的值

Question

在我的主干应用程序中，我有一个选择菜单，它使用路由过滤列表中的一些员工，它按部门执行此操作。

例如localhost/#filter/HR或 localhost/#filter/Accounting

routes: {
    "filter/:type": "urlFilter"
},

urlFilter: function (type) {     
    this.directory.filterType = type;
    this.directory.trigger("change:filterType");
},

然后在我看来：

filterByType: function () {
    if (this.filterType === "all") {
        this.collection.reset(contacts);
        app.navigate("filter/all");
    } else {
        this.collection.reset(contacts, { silent: true });

        var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
                return item.get("type").toLowerCase() === filterType;
            });

        this.collection.reset(filtered);

        app.navigate("filter/" + filterType);
    }
},  

但是，如果您直接访问其中一个 URL，则选择菜单不同步。

如何使选择与路线保持同步，其中选择选项值等于全部、人力资源和会计？

Answer 1

将 onchange 处理程序添加到您的列表中，并相应地更新 URL（通过添加当前列表项的参数值）。更改 URL 时防止重新加载页面（谷歌）。确保在使用参数打开 URL 时（即在页面加载时）更新当前列表项。