【问题标题】:How to choose which template to render based on a property如何根据属性选择要渲染的模板
【发布时间】:2020-02-05 09:12:54
【问题描述】:

我正在尝试从旧的 jQuery tmpl 升级到这个很棒的新 jsRender。

我的代码已经在工作了。

我正在使用基于后端返回的 JSON 的模板构建一个 FORM。

对象是:

var form = {
  name: "addNew",
  fields: [{type: "text", name: "Age"}, {type: "hidden", name: "Id"}] 
};

在旧的 jQuery 插件中我确实喜欢这个

'{{tmpl(this.data) selectInputTemplate( this.data )}}'

其中函数 selectInputTemplate() 将根据字段类型返回模板名称。

这将如何在新的 jsRender 中工作?


编辑:

如何访问整个对象?在旧的 jQuery 模板中使用 this.data

我创建了一个辅助函数来返回模板,但我需要知道如何访问整个对象以将其发送给辅助函数。


编辑 2:

这很难看,但它正在工作:

var form_field_wrap =
    "{{if type === 1 tmpl='form_field_input_text' /}}" +
    "{{if type === 2 tmpl='form_field_input_select' /}}" +
    "{{if type === 3 tmpl='form_field_input_checkbox' /}}" +
    "{{if type === 4 tmpl='form_field_input_radios' /}}" +
    "";

【问题讨论】:

    标签: jsrender


    【解决方案1】:

    在模板中,您可以使用#data 访问整个上下文数据对象。

    (见Paths and expressions

    在辅助函数中,this对象一般是当前的view对象,所以可以得到this.data的数据对象。

    这是一个显示上述两种方法的示例:

    <script id="myTmpl" type="text/x-jsrender">
        {{include tmpl=~getTmpl(#data)/}}
    </script>
    
    <div id="page"></div>
    
    <script>
        var myTmpl = $.templates("#myTmpl"),
            data = { name: "Jo" },
            helpers = {
                getTmpl: function(data) {
                    return $.templates("{{: 123}}" + data.name + this.data.name);
                }
            },
            html = myTmpl.render(data, helpers);
        $("#page").html(html);
    </script>
    

    顺便说一句,您可以使用 {{if}} 这样的标签编写示例

    "{{if type === 1 tmpl='form_field_input_text'}}" +
    "{{else type === 2 tmpl='form_field_input_select'}}" +
    "{{else type === 3 tmpl='form_field_input_checkbox'}}" +
    "{{else type === 4 tmpl='form_field_input_radios'}}" +
    "{{/if}}"
    

    【讨论】:

    • 这对你有用吗? (如果是这样,您可以“接受”答案。谢谢...)
    • 是的!非常感谢! jsRender 太棒了!!!它为我的应用程序提供了强大的功能。现在我问你:当我有这个时,为什么我需要 react 或 vue ?简直太棒了!!!谢谢!!!
    • 谢谢。是的,JsRender 与数据绑定 (JsViews) 一起构成了一个相当强大和广泛的平台。当然,它(不幸的是)不像 React、Vue 等那样广为人知。请参阅此进行比较讨论:stackoverflow.com/a/57322571/1054484
    猜你喜欢
    • 2019-09-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-22
    • 1970-01-01
    • 2019-08-11
    • 2016-11-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多