建模條件，榆樹簡單形式的嵌套窗體

我有一個以select開頭的窗體。根據選擇的內容，表單然後展開爲一個通用的主要位和一個取決於選擇的細節部分。建模條件，榆樹簡單形式的嵌套窗體

我開始做模特有獨立的細節部分

type ProductDetails 
    = Book Book.Model 
    | Brochure Brochure.Model 
    | Card Card.Model 

type alias Model = 
    { form : Form CustomError Estimate 
    , details : ProductDetails  -- a Form CustomerError CardModel/BookModel/.... 
    , msg : String 
    }

但這變得十分費解到例如在處理view。

該替代方案似乎有條件地將細節添加到主表單模型中 - 例如，

type alias Estimate = 
    { customer : String 
    , project : String 
    , product : String 
    , details : ProductDetails 
    }

之前我開始我歡迎別人的經驗是什麼一直運作良好

來源

2016-02-24 Simon H

我最終使用各個領域的快譯通，改變了場當產品發生變化。試圖更明確地模擬每個產品創建比我需要更多的鍋爐板。

來源

2016-07-21 13:10:28

如果我理解正確的，你有單獨的模塊圖書，小冊子和卡片？我不太明白你是什麼型號的目的，但我想構建這樣的：

import Book 
import Brochure 
import Card 

type Products 
    = Book 
    | Brochure 
    | Card 


type Msg 
    = Details Products 


type alias Model = 
    { selectedProduct : Product 
    } 


update : Msg -> Model -> Model 
update msg model = 
    case msg of 
     Details prd -> 
      Model prd 


view : Model -> Html 
view model = 
    model.selectedProduct.view

因此，大家可以看到，現在您可以定義所有可用的產品，然後你說，味精即可細節，這將顯示詳細信息，它的功能是將選定產品中的SelectedProduct值設置爲Model。您可以執行以下選項：

button [ onClick (Details Book) ] [ text "Book" ]

例如選擇一本書。之後你想讓它變成動態的，第一個本能應該是能夠調用所選產品的視圖功能。

在其他情況下，您可以定義視圖，這需要一些字段，每個產品的模型將包含這些字段，然後您可以使用它們在網站上寫入一些信息。

請注意，上面的代碼並不是爲了工作，它只是爲了表達想法。

來源

2016-07-21 12:00:36 maticzav

我不熟悉elm-simple-forms，但是這似乎是你的表單的良好表示：

type ProductType 
    = TBook 
    | TBrochure 
    | TCard 

type Product 
    = Book Book.Model 
    | Brochure Brochure.Model 
    | Card Card.Model 

type alias Model = 
    { product : Maybe Product 
    , customer : String 
    , project : String 
    } 

type Msg 
    = SelectProductType ProductType 

init : Model 
init = 
    { product = Nothing 
    , customer = "" 
    , project = "" 
    } 

update : Msg -> Model -> Model 
update msg model = 
    case msg of 
    SelectProductType product -> 
     {model | product = 
     case product of 
      TBook -> Book Book.init 
      TBrochure -> Brochure Brochure.init 
      TCard -> Card Card.init 
     } 

view : Model -> Html Msg 
view model = 
    case model.product of 

    Nothing -> 
     myProductTypeSelect 

    Just product -> 
     withCommonFormInputs 
     <| case product of 
      Book submodel -> Book.view submodel 
      Brochure submodel -> Brochure.view submodel 
      Card submodel -> Card.view submodel

的Maybe給你一個很好的方式，第一種形式（只選）和之間進行選擇第二種形式（客戶詳細信息+選定的產品類型詳情）。

的Book.view等給你Html，您可以添加到常見的情況：

withCommonFormInputs : Model -> Html Msg -> Html Msg 
withCommonFormInputs model productInputs = 
    div 
     [] 
     [ input [] [] -- customer 
     , input [] [] -- project 
     , productInputs -- product (Book, Brochure, Card) subform 
     ]

來源

2016-07-21 12:51:54

建模條件，榆樹簡單形式的嵌套窗體

回答

相關問題