我想弄清楚为该项目建模的正确 Ember.js 方法是什么，例如。需要什么模型、路线和 Controller 。 I have started a jsBin to work from .

我的要求可以安全地减少到:

项目及其选项

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

仪表板

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

导航

• 几乎没有
• 这将出现在一个“页面”上，但将来可能会添加少量页面/弹出窗口
• 我希望能够保存和重新填充给定状态(例如，选定选项 ID 的列表)

数据

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

那么这在 Ember 中是如何构建的呢？

我曾尝试自己做一次，但这是我的第一次尝试，最后我得到了一个非常丑陋的设置。我想看看有 Ember 经验的人会如何处理这个问题:

jsBin 模型(link)

我已经创建了一系列 Handlebars 模板，但没有尝试确定应该存在哪些模型以及需要哪些 Controller ......

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"
                    }
                }
      }
    }
  ]
}

最佳答案

我放了一个小 JSBin http://jsbin.com/IdAXuMar/5/edit

好的，在聊了聊并仔细观察之后，以下是我对如何简化它的想法:

您只有一个 URL，因此我现在只使用一个 Route 和一个 Controller。

数据模型非常简单，因为它是完全分层的:

Display 有很多Items， Item 有很多Options

而且因为您一次只看一个显示器，所以您根本不需要将显示器作为模型。如果您的应用程序不断发展并且您同时拥有多个 Display，那么实现 Display 模型并通过该模型执行所有 JSON 请求是有意义的。

我会实现一个单一的路由和 Controller :

App.Router.map(function() {
     this.resource('display', path: { 'display/:id' });
});

App.DisplayRoute = Ember.Route.extend({
    model: function(params) {
        return App.Item.find(params._id);
    }
});

DisplayController 对其所有项目具有完全访问权限，因为它们被设置为它的模型。

我认为您现在只需要一个模板，如果它变得无法控制，您可以稍后将它们拆分成多个部分。

<script type="text/x-handlebars" data-template-name="display">    
  {{#each model}}
    <!-- access on every item here -->


    {{#each option}}
      {{#if isSelected}}
        this option is selected
      {{/if}}
      <!-- access on every option here -->

      <a {{action selectOption this}} href=''> Select this option</a>

    {{/each}}
  {{/each}}
</script>

请注意 selectOption 操作:调用此操作并传递选项时，您可以直接在选项本身上设置选定状态，这将立即反射(reflect)在 View 中。

App.DisplayController = Ember.ArrayController.extend({
    // add computed properties here..

    actions: {
        selectOption: function(option) {
            option.set('isSelected', true);
        }
    }

});

要从服务器获取项目，您可以调用 App.Item.find() 然后传递显示的 ID。这不是 100% 的常规，因为您应该在此处传递项目的 ID，但我认为为此目的没关系。所以这个方法看起来像

App.Item = Ember.Option.extend({
    selected: false
    // add computed properties here
});

App.Item.reopenClass({

    // retrieves the items from the server

    find: function(displayId) {

        var url = "/game/json" + displayId;

        var items = new Ember.A();

        Ember.$.getJSON().success(function(data) {
            data.items.forEach(function(jsonItem) {

                var item = Ember.Item.create({
                    nid: jsonItem.nid,
                    title: jsonItem.title,
                    image: jsonItem.image
                });

                item.set('options', new Ember.A());

                jsonItem.options.forEach(function(option) {
                    var option = Ember.Option.create({
                        // set option properties
                    });
                    emberItem.get('options').pushObject(option);
                })

            })

        });

        return items;
    }
});

我希望这能帮助您入门，或许还能更轻松地将您的概念转移到 Ember。如果您有关于如何将所有内容保存回服务器的问题，请点击 :)

关于javascript - Ember.js:如何为这个例子建模？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19987433/