目的

我目前正在创建一个单页的Web应用程序。当应用程序时，应用程序将执行ajax调用，这将返回一个数字列表let。应用程序将处理这些数字并为每个数字创建一个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);

        }
    })

一般理念

上面的当前代码将创建带有3个div的“theaterDialogue”div框。对于每个div，通过Controller将onclick操作与其关联。当用户点击第一个div“有效载荷1”将打印在一个警告框中，第二个div“有效载荷2”等。而不是打印输出，我希望能够渲染一个新的对话框（jquery对话框）其中的内容将从模板中呈现。我不清楚这是如何做的.....我理解视图用于存储模板的数据......但不是如何将模板嵌套在由动作生成的模板中？

如果你能指出我的话，那就太棒了！

任何建议表示赞赏， d

Answer 1

嵌套的基本方法是，

定义嵌套路线（主要步骤，如果你做对了，你几乎就在那里）
如果您认为此视图稍后会附加某些内容，请在模板中添加{{outlet}}

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

A
|_B
  |_C

然后模板A＆amp; B应该有{{outlet}}，而C是最后一个{{outlet}}

好example

ember.js和嵌套模板/视图

目的

代码

一般理念

1 个答案: