Ember.js和嵌套模板/视图

Question

我仍在尝试学习 Ember.js，请耐心等待。

目标

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

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

代码

Index.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);

        }
    })

总体想法

上述代码将创建一个名为"theaterDialogue"的div框，其中包含3个div。每个div都与控制器相关联，并具有onclick操作。当用户点击第一个div“payload 1”时，将在警报框中打印出来，“payload 2”等等。我希望能够呈现一个新的对话框（jquery对话框），其中的内容将从模板中呈现。我不清楚如何做到这一点...我知道视图用于存储模板的数据...但不知道如何将一个模板嵌套在由操作生成的模板中？

如果您能指点我，那就太棒了！

非常感谢任何建议， D

- darewreck

Answer 1

嵌套的基本方法是：

• 定义嵌套路由（这是主要步骤，如果能正确实现，就接近成功了）
• 在模板中添加{{outlet}}，如果您认为此视图稍后会有其他内容附加到它上面

例如，我们有三个视图A、B、C，嵌套如下：

A
|_B
  |_C

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

一个好的例子

- Mudassir Ali

---

我真的很喜欢这个例子！+1 - MilkyWayJoe

感谢您的回复。然而，我认为它并没有完全解决我的问题。在您给出的示例中，{{outlet}} 只会更新基于所点击的链接的数据库。然而，我希望所有内容都可以同时呈现。例如：用户加载页面后，会看到一个带有三个 div 的弹出窗口。每个 div 都可以被点击，并显示新数据的新弹出窗口。用户可以关闭每个弹出窗口，但您应该能够理解我的意思。此外，我认为我没有理解视图和模板之间的区别。一个视图可以有多个模板吗？ - darewreck

通过这个例子，我只是想给你提供嵌套的基本方法，以便你使用这种理解来为你的用例提供解决方案。关于视图和模板，一个视图只能有一个模板，模板就是应该放在特定视图中的HTML内容，更多关于视图的信息请参考http://emberjs.com/guides/understanding-ember/the-view-layer/。 - Mudassir Ali