Question

我正在尝试实现父/子类视图，如下所示。即最初显示的列表＆amp;点击任何项目，我想进入详细信息视图（传递特定的id，发出AJAX请求并使用详细信息呈现子模板）

Router.map(function() {
    this.route('pending-items', function() {
        this.route('pending-items-details', {
            path: 'details/:itemId'
        });
    });
});

我的问题是，在创建路径/控制器/模板的同时，我必须遵循文件夹的特定层次结构，因为上述条件要求挂起项目＆＃39; ＆安培; ＆＃39;未决项-细节＆＃39;

如果我有AJAX响应，如何使用详细信息呈现子模板？

Answer 1

我喜欢以这种方式做你想做的事情：

Router.map(function() {
    this.route('pending-items', function() {
        this.route('details', {
            path: ':item_id'
        });
    });
});

使用Ember-cli，你可以这样做，如果你还没有创建

ember generate template pending-items
ember生成模板pending-items / details

这将为您生成模板文件夹中的这些文件

/pending-items.hbs
/pending-items/details.hbs

要渲染模板，您只需将 {{outlet}} 帮助器放入父模板中，例如：

/peding-items.hbs

<h1>Content of the template</h1>
<div class= 'details'>
    {{outlet}}
</div>

/pending-items/details.hbs

<h3> Details of an item</h3>
<p>something here</p>

现在运行并输入浏览器url put： // localhost：4200 / pending-items / 1

Ember实施清单/详细信息视图

1 个答案: