Question

我想使用数组元素并使用列表格式填充插座。我想知道最佳做法是什么。我有一个非常简单的应用程序，我在“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 CODE：

<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： 我理解视图之间的所有交互都是通过控制器完成的，所以如果我需要声明一个将“click事件”绑定到HTML中的每种颜色的函数，是否应该在其控制器中声明所有这些函数？

问题4： 关于列表项HTML表示，如果需要动态生成列表项，将在何处声明？

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

Answer 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数组。
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）并定义{{1事件处理程序。
- 如果您必须与数据进行交互，则可以使用{{action}}帮助程序。在基于路由器的应用程序中，操作的目标将是在路由器的当前状态中定义的处理程序。在这里，您可以查找其他控制器/模型并执行您想要的操作。
- 如果你想混合两者，那么在视图中定义onClick处理程序，并使用router.send（'yourAction'）
4 ：我不明白你的意思是onClick，所以不幸的是我不能在这里给出提示：（。

从模型数组动态填充/绑定带有列表项的出口？

1 个答案: