Back to Questions
429
views2
comments
Problems making a html table with WebSharper
websharperhtmlgetting started

I'm learning WebSharper, and I want to use it in a personal project (hoping it will grow...). I need to show some data in tabular format, so I'm trying to make a html table using a loop and a Var to store the informations (at the moment it's just the loop index). I obtained the table row, but the values displayed are all the maximum value of the index. My code is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let MyPosTable () =
        let nTabRows = Var.Create ""
        let nTabCols = Var.Create ""
        let maxTabRows = 5
        let maxTabCols = 8

        div [
            tableAttr [attr.id "PosTable"][
                thead [
                    tr [
                            for i = 1 to maxTabCols do
                                nTabCols.Value <- (i.ToString())
                                yield (td[textView nTabCols.View] :> Doc)
                       ]
                      
                      ]
                tbody [
                    
                      ]
            ]
        ]

I don't have this problem if I use:

1

yield (td[text (i.ToString())] :> Doc)

in the for loop.

Some one can help me?

Many thanks for attention.

.

Here you made nTabCols a reactive variable, and you have a view/projection of it (via textView) into markup. As each table header column is generated with this projection as its content, they get updated when nTabCols is incremented in your for loop. This means that by the time the entire header row is computed, nTabCols will be 8, and so all header columns will have 8 as well (after each cell going through changing their content (8-i) times.)

Short story: using a Var here is an overkill and unnecessary, simply iterate through with i and use its value - like you said.

I also noticed that you are using WebSharper.UI.Next - this library is now moved to WebSharper.UI and the HTML combinators there no longer need xxxAttr forms, but instead have two list arguments - one for attributes and one for inner elements. You might want to update to WebSharper.UI - it is the recommended view library now.

By on 1/18/2018 10:41 AM ()

Adam, thank you to explain me how Var works. I was trying to follow an example to understand how WebSharper works. By the way, I tried to use WebSharper.UI, but I got an error: the project doesn't find it. I updated the framework to the last version. I will try again. Thank you again.

By on 1/18/2018 2:18 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper