【问题标题】:ember.js and nested templates/viewsember.js 和嵌套模板/视图
【发布时间】:2013-04-05 01:14:18
【问题描述】:

我还在努力学习 ember.js,所以请多多包涵。

目标

我目前正在创建一个单页网络应用程序。当应用程序时,应用程序将执行一个 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 框。一个 onclick 动作通过控制器与每个 div 相关联。当用户单击第一个 div “payload 1”时,将在警报框中打印第二个 div “payload 2”等。我希望能够呈现一个新对话框(jquery 对话框),而不是打印出来内容将从模板呈现。我不清楚这是如何完成的……我知道视图用于存储模板的数据……但不知道如何将模板嵌套在由操作生成的模板中?

如果你能指点我,那就太棒了!

任何建议表示赞赏, D

【问题讨论】:

    标签: templates ember.js views


    【解决方案1】:

    嵌套的基本方法是,

    • 定义嵌套路由(主要步骤,如果你做对了,你就快到了)
    • 如果您认为此视图稍后会附加一些内容,请在模板中添加 {{outlet}}

    例如我们有3个视图A、B、C,嵌套如下

    一种 |_B |_C

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

    example

    【讨论】:

    • 我真的很喜欢这个例子! +1
    • 感谢您的回复。但是,我认为并不能完全解决我正在寻找的东西。在您给出的示例中,{{outlet}} 将仅根据单击的链接更新数据库。但是,我希望它们同时启动。示例:用户加载页面,看到一个包含三个 div 的弹出窗口。可以单击每个 div,然后将显示一个包含新数据的新弹出窗口。用户可以关闭每个弹出窗口,但您大致了解。另外我认为我没有得到视图和模板之间的区别。一个视图可以有多个模板吗?
    • 通过这个例子我只是想给你一些嵌套需要采取的基本方法,以便你使用理解来为你的用例提出解决方案。关于视图和模板,一个视图只能有一个模板,模板只不过是应该用于特定视图的html内容,更多关于视图emberjs.com/guides/understanding-ember/the-view-layer
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-16
    • 1970-01-01
    • 2013-02-23
    • 1970-01-01
    • 2015-10-13
    • 2011-10-30
    • 1970-01-01
    相关资源
    最近更新 更多