【问题标题】:I'm trying to build up options from an array data value using jsView我正在尝试使用 jsView 从数组数据值构建选项
【发布时间】:2013-12-01 05:26:30
【问题描述】:

如果您有一个没有属性的项目数组,您如何访问 for 循环中的值? 我目前得到了正确数量的选项,但我还没有找到正确的语法来获取选项的值。

有一个工作 jsfiddle 在: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));

正文,包括模板:

<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>

【问题讨论】:

    标签: arrays html-select jsviews


    【解决方案1】:

    如果 options 是一个字符串数组,则需要:

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

    还要注意选择元素上的数据链接表达式。

    一般来说,在您的 jsfiddle 中,您可以更多地使用数据链接。例如:

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

    (注意^)

    要进行数据链接,您需要

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

    而不仅仅是调用渲染...

    需要进行更多更改,但这里是您的 jsfiddle 的更新,它确实选择绑定:http://jsfiddle.net/BorisMoore/Y44Gm/5/

    【讨论】:

      猜你喜欢
      • 2022-06-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-09
      相关资源
      最近更新 更多