0

我想要一个数组元素并用列表格式填充一个插座。我想知道什么是最好的做法，拜托。我有一个非常简单的应用程序，我在“ColorModel”中声明了一个颜色数组。我想用这个数组中的所有颜色动态填充/绑定“home”（data-template-name）中标记为“homeContent”的出口。我不确定在哪里以及如何动态绑定内容，内容应该绑定到“App.ColorController”吗？我已经进行了在线搜索并得到了一些提琴，但这些方法并不是直截了当的。我感谢您的所有帮助。谢谢。

这是小提琴：http: //jsfiddle.net/exciter/sqJEh/

应用代码：

$(function(){

    App = Ember.Application.create({
        ready: function(){
            alert("APP INIT");
        }
    });

    //APP 
    App.ApplicationController = Ember.Controller.extend();
    App.ApplicationView = Ember.View.extend({
        templateName: "application",
        classNames: ['']
    });

    //NAVBAR
    App.HomeController = Ember.Controller.extend();
    App.HomeView = Ember.View.extend({
        templateName: "home",
        classNames: ['']
    });

    //MODELS

    //COLORS
    App.ColorModel = Ember.Object.create({
        //COLOR ARRAY
        var colorArr: Ember.A(["Orange","Blue","Green","Yellow","White","Grey","Purple","Silver","Black","Maroon","Sunburst"]);
    });

    App.ColorController = Ember.Controller.extend();
    App.ColorView = Ember.View.extend({
        templateName: '',
        classNames: ''
    }); 


    App.Router = Ember.Router.extend({
        enableLogging: true,
        location: 'hash',

        root: Ember.Route.extend({
            //EVENTS
            gotoHome: Ember.Route.transitionTo('home');

            home: Ember.Route.extend({
                router: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('home');
                }
            }),
        })
    });
    App.initialize();
});

HTML 代码：

<script type="text/x-handlebars" data-template-name="application">

</script>

<script type="text/x-handlebars" data-template-name="home">
    {{outlet homeContent}}
</script>

以下是问题：

在您的小提琴中，您有颜色数组：

var colors = ["Orange","Blue","Green",
               "Yellow","White","Grey",
               "Purple","Silver","Black",
               "Maroon","Sunburst"]

我一直在以这种方式声明数组：

var color: Ember.A(["Orange","Blue","Green",
               "Yellow","White","Grey",
               "Purple","Silver","Black",
               "Maroon","Sunburst"])

问题 1： Ember 宣扬的最佳实践是什么？

在你的小提琴的 HTML 中

<script type="text/x-handlebars" data-template-name="home">
   {{#each color in controller}}
     {{color}}           
   {{/each}}
</script>

我知道“颜色”来自哪里，但是您在哪里有 {{#each color in controller}}，

问题2： 那个“颜色”是从哪里来的？它是一个for-in循环吗？

问题 3： 据我了解，视图之间的所有交互都是通过控制器完成的，因此，如果我需要声明一个函数，该函数会将“点击事件”绑定到 HTML 中的每种颜色，是否应该在其中声明所有此类函数它的控制器？

问题 4： 关于列表项 HTML 表示，如果需要动态生成列表项，应该在哪里声明？

我很抱歉用这些问题轰炸你，我已经通过文档和无尽的线程，但这些信息几乎没有在任何地方讨论过。每个人都想演示他们的排骨，但他们几乎没有触及表面。甚至官方文档也缺乏这样的细节。感谢您的所有帮助。

4

1 回答 1

1

我认为您必须从：http ://trek.github.com/ 开始，它将回答您的大部分问题。在您的示例中，如果您想在应用程序视图中连接插座，则 {{outlet]] 应该在应用程序模板中。

调用时applicationController.connectOutlet('home')，Ember.js 将：

  • 在与应用程序相关的视图模板中搜索 {{outlet}}（此处为application模板）
  • 搜索一个名为 HomeController 的控制器，创建一个名为 HomeView 的视图并连接它们。

请参见下面的示例，其中我在 connectOutlet 方法中添加 HomeController 中的内容：

http://jsfiddle.net/sqJEh/19/

更新回答问题：

  • 1：默认情况下，您不需要将数组包装在 Ember.A() 函数中，因为 Ember.js 通过扩展数组原型来为您完成。[]Ember Array 也是如此。

  • 2：是的，{{#each}} 助手提供了一种 forEach 循环http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each。控制器是一个 ArrayController（基本上代理一个数组）。在此示例中，控制器是homeController实例，在 connectOutlet 期间由颜色填充。所以在做的时候{{#each color in controller}}，我只是通过控制器循环遍历颜色数组。

  • 3：这里有点难回答，因为我认为有几种方法可以处理用户交互。这取决于你想做什么。

    • 如果它只处理视图问题（例如通过 jquery 进行 css 或 dom 操作，那么我将为每种颜色创建一个子视图（使用 {{#each}} 帮助器的 itemViewClass）并定义一个onClick事件处理程序。
    • 如果您必须与数据交互，那么您可以使用 {{action}} 助手。在基于路由器的应用程序中，动作的目标将是在路由器的当前状态中定义的处理程序。在这里您可以查找其他控制器/模型并做您想做的事情。
    • 如果您想混合使用两者，则onClick在视图中定义处理程序，并使用 router.send('yourAction') 将操作重定向到路由器

  • 4: I don't understand what you mean by dynamically generated, so unfortunately I can't give hint here :(.

于 2012-12-26T09:45:36.283 回答