Ember.js:如何建模这个例子？

Question

我试图找出正确的Ember.js模型这个项目的方法,例如.需要什么型号,路线和控制器. 我已经开始使用jsBin了.

我的要求可以安全地降低到:

物品及其选择

• 物品有一系列选项
• 选项有自己的属性
• 项目具有仪表板将使用的其他属性(选项旁边)

仪表板

• 仪表板没有任何自己的数据
• 仪表板需要观察所有项目和选项,并更新其属性的分析

导航

• 实际上没有
• 这将显示在一个"页面"上,但将来可能会添加少量页面/弹出窗口
• 我希望能够保存并重新填充给定的状态(例如,选定的选项ID列表)

数据

• 使用单个json调用将加载一次数据
• 应用程序逻辑将仅在Ember内的客户端完成 - 没有业务逻辑的ajax
• 与服务器的唯一后续联系将是/当用户保存状态时

那么在Ember中如何构建呢？

我曾尝试过一次这样做,但这是我的第一次尝试,最后我得到了一个非常丑陋的设置.我想看看Ember经验的人会如何接近这个:

jsBin Mockup(链接)

我已经创建了一系列车把模板,但没有尝试应该存在哪些型号以及需要哪些控制器.

JSON

{
  "Items" : [
    {
      "Item" : {
        "nid" : "3",
        "title" : "Hydro",
        "image" : "http://bpf.vm/sites/default/files/bpf_things/hydro.jpg",
        "properties" : "Baseload, Intermittent",
                "values" : {
                    "Cost" : {
                        "price" : "6",
                        "quantity" : null
                    },
                    "Percent of Portfolio" : {
                        "price" : null,
                        "quantity" : "56"
                    }
                },
                "options" : {
                    "1" : {
                        "price" : "1512",
                        "quantity" : "10000"
                    },
                    "12" : {
                        "price" : "825",
                        "quantity" : "20000"
                    },
                    "11" : {
                        "price" : "550",
                        "quantity" : "50000"
                    }
                }
      }
    },
    {
      "Item" : {
        "nid" : "4",
        "title" : "Nuclear",
        "image" : "http://bpf.vm/sites/default/files/bpf_things/nuclear.jpg",
        "id" : "",
        "properties" : "Baseload, Predictable",
                "values" : {
                    "Cost" : {
                        "price" : "8",
                        "quantity" : null
                    },
                    "Percent of Portfolio" : {
                        "price" : null,
                        "quantity" : "21"
                    }
                },
                "options" : {
                    "4" : {
                        "price" : "825",
                        "quantity" : "10000"
                    },
                    "13" : {
                        "price" : "411",
                        "quantity" : "15000"
                    }
                }
      }
    },
    {
      "Item" : {
        "nid" : "5",
        "title" : "Natural Gas",
        "image" : "http://bpf.vm/sites/default/files/bpf_things/gas.jpg",
        "id" : "9",
        "properties" : "Baseload, Predictable",
                "values" : {
                    "Cost" : {
                        "price" : "5",
                        "quantity" : null
                    },
                    "Percent of Portfolio" : {
                        "price" : null,
                        "quantity" : "24"
                    }
                },
                "options" : {
                    "7" : {
                        "price" : "400",
                        "quantity" : "50000"
                    },
                    "10" : {
                        "price" : "600",
                        "quantity" : "100000"
                    }
                }
      }
    }
  ]
}

Answer 1

这是答案的开头：

楷模

我想我这里只需要三个模型。仪表板是该应用程序的主要参与者，但它没有自己的任何数据。

• 项目模型- 保存项目的所有信息
• 期权模型- 保存期权的所有信息
• 显示模型- 保存一组选定的选项 ID，可以将其发送到服务器并保存，或者可用于将应用程序返回到特定状态

控制器

早些时候我完全忽略了 ArrayController 的概念。一般来说，任何集合都需要一个 ArrayController 来表示它，而不是一个普通的 ember ObjectController。我的“项目”将需要一个，但我认为“选项”不需要，因为选项是项目的子项，并且可以使用项目/项目作为代理。

• 仪表板- 我猜这将是最强大的仪表板，因为控制器需要处理所有项目和集合
• 项目- 由于有很多项目，我们需要一个 ArrayController 来存储它们
• 项目- 当项目的状态发生变化时，需要对其选项进行一些简单的分析
• 选项- 选项至少需要响应点击操作

模板

这里的缩进代表渲染其他模板的模板。例如，我的显示模板包含{{render dashboard}}和{{render items}}。

• 应用程序- 从技术上讲是应用程序根目录，它重定向到显示器（这可能不是必需的）
  • 显示- 本质上是我的应用程序的根。
    • 仪表板- 提供项目/选项可视化分析的区域
    • Items - 渲染每个项目
      • 选项- 呈现每个项目的选项

路线

这还是很朦胧的。路由似乎扮演着很多角色（将 url 映射到模型、为控制器设置模型，也许还有其他东西？？）。目前我能想到的唯一需要的网址是：

• 显示- 由于我的“显示”代表应用程序快照（例如，保存的版本），因此需要在 App.Router.map 中指定

其他路线：

• 申请途径
  • setupController：将控制器设置为空白/保存显示
• 索引路由
  • redirect：只是重定向到显示路由（本质上是应用程序的根目录）
• 显示路线
  • model：将给定的显示器设置为模型
  • afterModel：加载显示指定的项目

我想仅此而已。这是一个简单的应用程序，一旦我为显示加载了项目，那么该应用程序只会更改屏幕的显示。有用户选择，但它们是布尔标志（例如，在项目上设置 isSelected 应该更改仪表板显示的数据） - 这些选择不需要任何导航。