Question

我一直试图在今天的大部分时间里解决这个问题而且这让我感到疯狂，因为我觉得我几乎就在那里，但是无法想出最后一部分......

我有一个名为Map的路线，它会呈现一个侧边栏，并且在其中有一个侧边栏内容的命名插座：

map.hbs：

<div id="map-container">
    {{render sidebar}}
    <div id="map-canvas">
    </div>
</div>

... sidebar.hbs：

<div id="content-menu">
    {{outlet sidebar-content}}
</div>

我的侧边栏中的每个菜单项都有一个名为loadModule的自定义操作，它会在侧边栏内容插座中执行命名视图的渲染（使用{{action'loadModule''sidebar.module'}}）：

var MapRoute = App.AuthenticatedRoute.extend({
actions: {
    loadModule: function(module) {
        //load a valid view template into the view
        this.render(module, 
            {
                into: 'sidebar',
                outlet: 'sidebar-content'
            });
    }
}
});

module.exports = MapRoute;

控制器中该视图的任何操作都可以正常工作，我可以通过按钮等触发它们，或者通过在SidebarModuleViews中的didInsertElement中调用它们。

我的问题是我无法为这些视图定义模型，所以如果我尝试从任何控制器中的API获取数据，它就不会将数据呈现给模板。

我尝试使用link-to，但是我无法将模板附加到当前视口，而不是刷新整个页面，这会使得侧边栏失败（我不希望路径发生变化））

var SidebarUserController = App.ApplicationController.extend({
actions: {
    doSomething: function() {
        alert('SOMETHING');
    },
    fetchUserProfile: function() {
        //do something
        var mod = this.store.find('profile', App.Session.get('uid'));
    }
}
});

我可以在呈现的模板中触发这些操作中的任何一个，但是，虽然我的商店更新了记录，但侧边栏/ user.hbs中的把手帮助器不会填充模型数据。

这是我的模特：

var Profile = DS.Model.extend({
uid: DS.attr('string'),
firstName: DS.attr('string'),
lastName: DS.attr('string'),
gender: DS.attr('string'),
DOB: DS.attr('date'),
email: DS.attr('string')
});

module.exports = Profile;

这是我的侧栏/ user.hbs：

<div class="container">
    <button {{action 'doSomething'}}>Do A Thing</button>
    <h1>{{firstName}} {{lastName}}</h1>
    <h4>{{id}}</h4>
    {{#if isAuthenticated}}
        <a href="#" {{action 'logout'}}>Logout</a>
    {{/if}}
</div>

在该模板中，firstName，lastName和id字段不会填充，即使我从API中提取数据并成功存储它。

此外，如果它有帮助，我的侧边栏/用户的router.map看起来像这样：

this.resource('sidebar', function() {
        this.route('user');
    });

我认为这里的根本问题是我无法解决如何在不触发路径的情况下为控制器设置模型。我是不是错了？

Answer 1

好的，所以我已经为我的特定实例做了这个。它可能不是最好的方式，但它是我需要的：

在我的MapRoute中，我在setupController函数中为我的附加侧边栏菜单设置了模型和控制器。这样做允许我在页面加载时加载关键数据（例如用户配置文件等），我仍然可以保留Route中每个侧边栏模块的渲染功能，这将允许加载初始数据，并且仍然允许我在后续功能上更新每个侧边栏模块控制器的模型数据：

map_route.js：

actions: {
        loadModule: function(module) {
            this.render(module, {into: 'sidebar', outlet: 'sidebar-content'});
        }
},
setupController: function(controller, profile) {
    var model = this.store.find('profile', App.Session.get('uid'));
    var controller = this.controllerFor('sidebar.user');
    controller.set('content', model);
},
...

Emberjs：动态模板嵌套和路由

1 个答案: