I'm trying to build up options from an array data value using jsView

169 views Asked by At

if you have an array of items, without properties, how do you access the value inside a for loop? I currently get the right number of options, but I haven't found the correct syntax to get the value of the option.

there's a working jsfiddle at: http://jsfiddle.net/geewhizbang/Y44Gm/4/

var data = {
    items: [{
        "title": "First Drop Down",
            "hist": "Secondary",
            "dec": "Priority",
            "options": ["Priority", "Secondary"],
            "type": "select"
    }, {
        "title": "Second Drop Down",
            "hist": "Competitive Widget",
            "dec": "Competitive Widget",
            "options": ["Yadda", "Badda", "Bing", "Mobile", "Server", "Client", "Snickerdoodle"],
            "type": "select"
    }]
};
$.views.converters("dateFormat", function (val) {
   if (val == null) return "";
    var d = new Date(val);
    if (d.getFullYear() == "1900") return "";
    return d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear();
});
$template = $.templates("#template");
$("#container").html($template.render(data));

the body of this, including template:

<div id="container">
    <script id="template" type="text/x-jsrender">
    {{for items}}
        <div class="bodyItem">
            <div class="colDec">
                <p>{{>title}}</p>
                {{if type == "select"}}
                    <select data-link="{{>dec}}">
                        {^{for options}}
                            <option value="{{#}}">{#}</option>
                        {{/for}}
                    </select>
                {{else}}
                    {{if type == "date"}}
                        <input value="{{dateFormat:dec}}" class="date" />
                    {{else}}
                        <div contentEditable="true">{{>dec}}</div>
                    {{/if}}
                {{/if}}
            </div>
            <div class="colHist">
                <p>{{>title}}</p>
                {{if type == "date"}}
                    <input value="{{dateFormat:dec}}" class="date" />
                {{else}}
                    <div>{{>dec}}</div>
                {{/if}}
            </div>
        </div>
    {{/for}}
</script>
1

There are 1 answers

0
BorisMoore On

If options is an array of strings, you need:

<select data-link="dec">
    {^{for options}}
        <option value="{{:#data}}">{{:#data}}</option>
    {{/for}}
</select>

Note also the data-link expression on the select element.

In general, in your jsfiddle, you can use data-linking much more. For example:

<div>{^{>dec}}</div>

(Note the ^)

And to do data-linking you need

$template.link("#container", data);

rather than just calling render...

There are more changes needed, but here is an update of your jsfiddle which does select binding: http://jsfiddle.net/BorisMoore/Y44Gm/5/