1

我正在学习 Ember.js 1.0.0-rc.3，我想知道创建“动态 MVC”应用程序的正确方法。我所说的“动态 MVC”是指点击索引页面时我拥有的唯一内容是实体名称的集合。其余的将是动态生成的，即模型（数据），最终针对控制器的特定操作，特别是模板。

这是我想要实现的目标：我有一组实体（例如 ["User"、"Customer"、"Invoice" 等]）。我希望每个实体的路线是：

.../#/user/
.../#/customer/
.../#/invoice/

for each entity name

this.resource(" entity name lower case");

为了便于解释，点击实体路由将显示一个带有 2 个链接的视图。一个用于创建新实体，一个用于显示实体列表。路线将是：

.../#/user/                => will display a "Create" link and "List" link
.../#/user/create/         => sub route to display a form to create a User
.../#/user/list/           => sub route to display a collection of existing Users

.../#/customer/
.../#/customer/create/
.../#/customer/list/

...etc...

现在子路由的模板（“ .../#/user/create/ ”、“ .../#/user/list/ ”等）不存在，而是将按需加载/创建. 这是名为 SSD（Sketch、Schema、Data）的新 UI 设计模式的一部分，其中基于 Sketch（视图的骨架）、Schema（特定于该视图）生成模板。动作也一样。

1）第一个问题。知道我最终可能会得到 100 个以上的实体，为每条路线设置一个控制器、一个模型、一个视图是正确的方法吗？以及子路线......我有点担心这里的表现，因为所有这些对象都是在点击索引页面时创建的。

在当前示例中，我将拥有以下 Ember 对象：

UserController, UserRoute, UserView
UserCreateController, UserCreateRoute, UserCreateView
UserListController, UserListRoute, UserListView
CustomerController, CustomerRoute, CustomerView
CustomerCreateController, CustomerCreateRoute, CustomerCreateView
CustomerListController, CustomerListRoute, CustomerListView
etc.
//it becomes easily heavy

我试图将多个路径链接到相同的 MVC 对象，但是很难识别当前使用的实体。分析当前路径，如果可行的话，看起来真的很难看。例如：

this.resource('entity', { path: '/' + user });
this.resource('entity', { path: '/' + customer });
this.resource('entity', { path: '/' + invoice });
//all attached to EntityController, EntityView and EntityRoute
//Could be working but hard to identity which entity User, Customer or Invoice is really used

this.resource('entity.create', { path: '/' + user + '/create' });
this.resource('entity.create', { path: '/' + customer + '/create' });
this.resource('entity.create', { path: '/' + invoice + '/create' });
//Same for EntityCreate

我也尝试使用 this.controllerFor('entity'), this.controllerFor('entity.create'), this.controllerFor('entity.list') 但这并没有减少对象的数量并且它使代码比它应该的更复杂。

2) 第二个问题： 为了能够处理动态模板，我使用 ajax 调用实现 setController() 以加载必要的 SSD，该 SSD 将用于创建模板和模型。我将模板保存到 Ember.TEMPLATES[ template name]，更改数据属性，并将观察者附加到 Route 的 renderTemplate。

这是动态更改模板的正确方法吗？

这是一个示例（未测试，只是为了查看加载/更改模板和模型的过程）：

App["UserCreateRoute"] = Ember.Route.extend({
    templateName: "loading",  //display a temporary template while loading the template
    renderTemplate: function() {
        this.render(this.get('templateName'), {
            ///...
        });
    }.observes("templateChanged"),

    setupController: function(controller, model) {

        var self = this;

        $.when(` ajax load `).done(function( response ) {

            var templateName = xxx;  // based on the entity for instance "user/create"

            if (`template doesn't exist`) {
                Ember.TEMPLATES[templateName] = CreateMyTemplate( response );
                self.set("templateName", templateName);
            }

            //also change the model
            self.set("data", reponse.someData );

            //eventually add method to the controller?
            //...

            //tell renderTemplate to re-render
            self.set("templateChanged", new Date());

        })
    },

    model: function(params) {
        //simplified for sample
        return this.get("data")
    }
})

有点长，谢谢阅读！

4

0 回答 0