Rendering Form Elements

[Timothy Washington]

Hi all, a quick question about rendering form elements. 

I want to render JSON data to the form elements i) text inputs and ii) select drop downs. But I can't find a workable directive for either of these 2 cases. I've searched the mailing list and dug into the documentation, but can't seem to find an answer. So my HTML, data, and directives look like A), B), and C) respectively. If I try to render it with D), I get nothing with the text input, and the dropdown list gets replaced with just a string value.  

A)

      <div class='account_container'>

        <div class='account_content'>

          <div>

            <label>Name</label>

            <input id='account-text-input' type='text' />

          </div>

          <div>

            <label>Category</label>

            <select id='account-select-dropdown'>

              <option value='asset'>asset</option>

              <option value='liability'>liability</option>

              <option value='revenue'>revenue</option>              <option value='expense'>expense</option>

            </select>          </div>

          <div>            <input type='button' value='ok' />

            <input type='button' value='cancel' />          </div>

        </div>      </div>

B)      {   

        counterWeight: "debit",        id: "revenue",

        name: "revenue",        tag: "account",

        type: "revenue"      }   

C)

      accountDirective: {

        "#account-text-input": "some.value",

        "#account-select-dropdown": "<?howto-select_from-existing-list?>",

      }   

  

D)

      $('.account_container').render(myModel, accountDirective)

Is there a straight forward way of doing this? I can hack together a render with JQuery. BUt I much prefer the elegant line D) if I can get it. 

Thanks in advance 

Tim Washington 

Interruptsoftware.ca 

416.843.9060 

[Mic (BeeBole)]

Here is a snippet of directive I use for a drop down about currency.

'select.curr option':{

'curr<-currs':{

'.':'curr.pos',

'@value':'curr.pos',

'@selected':function(a){

return a.curr.pos === a.context.cost.curr ? 'x':'';

[Timothy Washington]

Thanks for the feedback. 

The thing is, that I want to iterate over the list of options in <select>. So if I pass in an account object to the render() function, and my selector expression gives me a list of options, I want to be able to have a function that can access the current option of my selector expression. 

    accountDirective:

      {   

        ... 

        "#account-type option@selected": (accountObj) ->

          return ( ( <current_option_iterated.type> === accountObj.context.type ) ? 'selected' : '' )

        ... 

      } 

The only iteration that I see , is available on the passed in object. Ie, your example assumes that I can pass in a list of things to match against the options. Does this make sense? Is what I want possible with Pure templates? 

Thanks 

Tim Washington 

Interruptsoftware.ca 

416.843.9060 

[Mic (BeeBole)]

It is not possible with this version. The version 3 allows that. But it still needs a way to make nested loop and templates fast.

Either you can use the technique I describe (the selected or not, is set in the JSON, not in the DOM) or with a DOM manipulation.

[Timothy Washington]

Ok, that's what I needed to know. I ended up going with DOM manipulation using JQuery. But it sounds like version 3 will have this facility, which is great. 

Thanks, and thanks for building Pure templates. It's exactly what I need :) 

Tim Washington 

Interruptsoftware.ca 

416.843.9060 

--
You received this message because you are subscribed to the Google Groups "JavaScript Templates Engine PURE" group.

To view this discussion on the web visit https://groups.google.com/d/msg/Pure-Unobtrusive-Rendering-Engine/-/iGoY6npo2SoJ.

To post to this group, send email to Pure-Unobtrusive...@googlegroups.com.
To unsubscribe from this group, send email to Pure-Unobtrusive-Rende...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine?hl=en.