templates - ember.js 和嵌套模板/ View

Question

我仍在努力学习 ember.js，所以请耐心等待。

客观的

我目前正在创建一个单页 Web 应用程序。当应用程序时，应用程序将执行一个 ajax 调用，它将返回一个数字列表。应用程序将处理这些数字并为每个数字创建一个 div 并将其存储到一个 div 容器中。

点击事件将与每个 div 相关联，因此当用户点击链接时，将出现一个弹出对话框。

代码

索引.html

 <script type="text/x-handlebars">
            <h2>Welcome to Ember.js</h2>
            {{outlet}}

        </script>

        <script type="text/x-handlebars" data-template-name="payloads"> 
            <div class="page">
                <div id="desktopWrap">
                    <div id="theaterDialog" title="Theater View" class="bibWindow1">
                            {{view.name}}
                    {{#each item in model}}
                        <div {{bindAttr id="item"}} {{action click item}}>
                            <div class="thumb1" ></div>
                            <div class="userDetails1">Payload {{item}}</div>
                            <div class="online1" ></div>
                        </div>
                        <div class="spacer10"></div>
                    {{/each}} 
                    </div>
                </div> 
            </div>
        </script>

我的 app.js 文件在这里:

App = Ember.Application.create();

App.Router.map(function() {

});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['Payload_1', 'Payload_2', 'Payload_3'];
  }
});

App.PayloadsRoute = Ember.Route.extend({
   model: function() {
    return ['Payload_1', 'Payload_2', 'Payload_3'];
  } 
})


  App.IndexController = Ember.ObjectController.extend(
    {
        click: function(e)
        {
            alert("clicked:" + e);

        }
    })

大概的概念

上面的当前代码将创建具有 3 个 div 的“theaterDialogue”div 框。每个 div 的 onclick 操作都通过 Controller 与之关联。当用户点击第一个 div “payload 1” 将打印在警告框中，第二个 div “payload 2” 等。而不是打印出来，我希望能够呈现一个新的对话框(jquery 对话框)内容将从模板呈现的位置。我不清楚这是如何完成的.....我知道 View 用于存储模板的数据...但不知道如何在由操作生成的模板中嵌套模板？

如果你能指点我任何人，那就太棒了!

任何建议表示赞赏，
D

Answer 1

嵌套的基本方法是，

定义嵌套路由(主要步骤，如果你做对了，你就快到了)

添加 {{outlet}}在模板中，如果您认为此 View 稍后会附加一些内容

例如我们有3个 View A、B、C，嵌套如下

一种
|_B
|_C

那么模板 A 和 B 应该有 {{outlet}} , 而 C 是最后一个它不应该有 {{outlet}}
不错example