These are chat archives for jdubray/sam

14th
Sep 2017
Jean-Jacques Dubray
@jdubray
Sep 14 2017 08:51
To be frank, I am not sure I am a big fan of JSX. I had not touched it for the last couple of years and compared to ES6 Template Literals, I'd argue it's a step backwards. The idiosyncracies involved in getting it to the right thing are just beyond belief. In comparison, Angular is just a breeze.
image.png
I am just trying to get a simple checkbox running. As you can see the className must be set to "completed" or null (instead of false) and that works: when the item is completed, it is greyed out. But... the checkbox is not checked even though the "check" value is "true". When I check another item, the checkbox of the previous items becomes checked as it would be expected (if select drink, sleep will be checked properly and drink will be greyed out).
I mean this code couldn't be simpler:
 <ul className="todo-list">
                    {params.items.map(function (item, index) {
                        let completed = item.completed ? 'completed' : null
                        let itemCompleted = (item.completed) ? item.completed : false
                        console.log(index + ' / ' + itemCompleted + '[' + completed + ']')
                        return (
                            <li key={index} className={completed}>
                                <input className="toggle" type="checkbox" checked={itemCompleted} onChange={check} name={index}/>
                                <label>{item.title}</label>
                                <button className="destroy" onClick={removeItem} value={index}></button>
                            </li>
                        )
                    })}
                </ul>
Jean-Jacques Dubray
@jdubray
Sep 14 2017 10:30
That being said, even a simple input seemed to be quite a challenge (without using state bindings)
 header(params) {
        const addItem = (e) => { 
            e.preventDefault()
            e.stopPropagation()
            this.dispatch({name: "addItem", title: document.getElementById('newItem').value})
            document.getElementById('newItem').value = ''
        }

        return ( 
            <div>
                 <h1>todos</h1>
                 <form name="todo" onSubmit={addItem}>
                    <input id="newItem" className="new-todo" placeholder="What needs to be done?" autoFocus={true} />
                 </form>
            </div>)
        },
I can't be believe I have to go back to getElementById??
Fred Daoud
@foxdonut
Sep 14 2017 11:28
@jdubray checked={val} with val = true | false should be fine.
As for your second example. Remember that v=f(M) but here your view is not using the model! instead of document.getElementById... you should have instead have something like model.present(...) which is a proposal asking the model to reset the value of model.newItem to "". Then, your view should be rendering <input className="new-todo" value={model.newItem} /> and you don't need the id.
Fred Daoud
@foxdonut
Sep 14 2017 11:36
You should have onChange={...} on your <input> to present the values to the model.
Fred Daoud
@foxdonut
Sep 14 2017 11:46
For example:
<input type="text" size="2" value={model.value} onChange={actions.editEntryValue} />
editEntryValue: evt => update(model => _.set(model, "value", evt.target.value))
devin ivy
@devinivy
Sep 14 2017 12:20
yes, this is what in react is called a "controlled input"
Jean-Jacques Dubray
@jdubray
Sep 14 2017 13:33
I actually tried onChange before for the input but it would trigger for every key and I would need to check for CR, it looks like you can't trigger onSubmit on a single <input> element (without a <form> enclosure).
for checked, isn't it what I am doing? <input className="toggle" type="checkbox" checked={itemCompleted} ...
Sorry for asking such basic questions, I truly embarassed.
Jean-Jacques Dubray
@jdubray
Sep 14 2017 13:43
It looks like there is some kind of interference between the intrinsic behavior of the checkbox and the rendering.
Inspecting the rendered HTML is not very helpful
image.png
Jean-Jacques Dubray
@jdubray
Sep 14 2017 18:55
@foxdonut thank you for the sample. I am not quite sure what I am doing wrong, I added the e.target.checked to my action but the value was already correct. It might be something else that creates a discrepancy between the checkbox and the label presentation (in the TODOMVC sample they change the class of the <li> element to completed (<li key={index} className={completed}>)
I tried to remove the class but that does not work either. Must be on the rendering side, I'll check that next
Jean-Jacques Dubray
@jdubray
Sep 14 2017 19:01
I am just puzzled that the props values are correct and the rendering is not