Ember.js：如何為該示例建模？

Question

我試圖找出對這個項目建模的正確Ember.js方法，例如。 需要什么模型，路線和控制器。 我已經開始從jsBin工作 。

我的要求可以放心地減少到：

項目及其選項

• 項目具有選項的集合
• 選項具有自己的屬性
• 項目具有儀表板將使用的其他屬性（在選項旁邊）

儀表板

• 儀表板本身沒有任何數據
• 儀表板需要觀察所有項目和選項，並更新其屬性分析

導航

• 幾乎沒有
• 這將顯示在一個“頁面”上，但將來可能會添加少量頁面/彈出窗口
• 我希望能夠保存並重新填充給定狀態（例如，選定選項ID的列表）

數據

• 數據將通過一次json調用加載一次
• 應用程序邏輯將僅在Ember內部由客戶端完成-業務邏輯無需使用ajax
• 服務器保存的唯一后續聯系人將是用戶保存狀態時

那么在Ember中將如何組織？

我曾經嘗試過一次，但是這是我的第一次嘗試，最終我做了一個非常丑陋的設置。 我想看看有Ember經驗的人如何做到這一點：

jsBin模型（ 鏈接 ）

我創建了一系列的車把模板，但沒有對應該存在哪些模型以及需要哪些控制器進行嘗試。

傑森

{
  "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

我在http://jsbin.com/IdAXuMar/5/edit上放了一個小JSBin

好吧，所以在聊了一會又看了一會兒之后，我想到了如何簡化此操作的想法：

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

數據模型非常簡單，因為它是完全分層的：

顯示器有很多項目 ，一個項目有很多選項

而且，因為您一次只看一個顯示器，所以根本不需要將顯示器作為模型。 如果您的應用程序不斷發展並且您一次擁有多個Displays，則可以實現一個Display模型，並通過該模型執行所有JSON請求。

我將實現一個路由和控制器：

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動作：調用此選項並傳遞選項時，您可以直接在選項本身上設置所選狀態，這將立即反映在視圖中。

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。 如果您對如何將所有內容都保存回服務器有疑問，請射擊:)

Answer 2

這是答案的開始：

楷模

我想這里只需要三個模型。 儀表板是此應用程序中的主要角色，但它本身沒有任何數據。

• 物料模型 -保存物料的所有信息
• 期權模型 -持有期權的所有信息
• 展示模型 -包含一組選定的選項ID，這些選項ID可以發送到服務器並保存，也可以用於將應用恢復為特定狀態

控制器

之前，我完全沒有ArrayControllers的概念。 通常，任何作為集合的東西都需要一個ArrayController來表示它，而不是普通的ember ObjectController。 我的“項目”將需要一個，但我不認為“選項”將是因為“選項”是“項目”的子代，並且可以使用“項目/項目”作為代理。

• 儀表板 -我猜這將成為最強大的儀表板 ，因為控制器需要處理所有項目和集合
• 物品 -由於物品很多，我們將需要一個ArrayController
• 物品 -當物品的狀態改變時，物品需要對其選項做一些簡單的分析
• 選項 -選項至少需要響應點擊操作

范本

此處的縮進表示呈現其他模板的模板。 例如，我的顯示模板包含{{render dashboard}}和{{render items}} 。

• 應用程序 -從技術上講是應用程序的根目錄，它重定向到顯示（可能沒有必要）
  • 顯示 -本質上是我的應用程序的根目錄。
    • 儀表板 -提供項目/選項視覺分析的區域
    • 項目 -渲染每個項目
      • 選項 -呈現每個項目的選項

路線

這仍然很朦朧。 路由似乎扮演着許多角色（將URL映射到模型，為控制器設置模型，也許還有其他東西？）。 目前，我唯一需要考慮的網址是：

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

其他路線：

• 應用程序路由
  • setupController ：將控制器設置為空白/保存的顯示
• 索引路由
  • redirect ：僅重定向到顯示路由（基本上是應用程序的根目錄）
• 顯示路線
  • model ：將給定的顯示設置為模型
  • afterModel ：加載顯示指定的項目

我認為就這些。 這是一個簡單的應用程序，一旦我加載了要顯示的項目，那么該應用程序便會更改屏幕的顯示。 有用戶選擇，但是它們是布爾標志（例如，對項目的isSelected設置應更改儀表板顯示的數據）-這些選擇不需要任何導航。