Question

在json中我有字段控件类型的元数据（文本框，文本区域，组合框，电子邮件，日期，地址等）。

{
 "Metadata":
"Fields": 
[
  {
            "Fieldname": "id",
            "Title": "Uniq id",
            "ClientValueType":"int",
            "ClientControltType":"textbox",
            "ClientInputWidth":"9"
  },
  {
            "Fieldname": "name_full",
            "Title": "org full name",
            "ClientValueType":"string",
            "ClientControlType":"textarea",
            "ClientInputWidth":"100"
  },
  {
            "Fieldname": "name_full",
            "Title": "org full name",
            "ClientValueType":"string",
            "ClientControlType":"textarea",
            "ClientInputWidth":"100"
  }
]
},"Data":[ {id:1, name_full:"org1"}, {id:2, name_full:"org2"}]
}

让我们为每种编辑类型控制不同的文件：textbox.html，textarea.html，combobox.html等。

Textbox.html例如

<polymer-element name="text-box" noscript>
  <template>
    here is textbox
  </template>
</polymer-element>

我需要动态导入这些元素，以根据field.ClientControlType值

呈现动态编辑表单

<polymer-element name="rawc-detail" attributes="data">

<template>
    <div class="panel panel-default">
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <template id="fields" repeat="{{val in fields}}">
                    <div class="form-group">
                        <label for="val.Name" class="col-sm-2 control-label">{{val.Title}}</label>
                        <div class="col-sm-10">{{val.element}}</div>
                    </div>
                </template>
            </form>
        </div>
    </div>

<style>
</style>

</template>

<script>
Polymer({
    data:{},
    ready: function() {
        this.fields = [];
    },
    dataChanged: function(oldValue, newValue) {
        this.bindNewData();
    },

    bindNewData: function() {
        console.log(this.data);

        var t = document.querySelector('rawc-detail::shadow #fields');

        if (t)
        {
            var model = {
                fields: []
            };

            for (var i=0; i<this.data.Metadata.Fields.length; i++)
            {
                var field = this.data.Metadata.Fields[i];
                //console.log(field);
                if (field.ClientControlType == "textbox")
                {
                    var link = document.createElement('link');
                    link.href='http://localhost/testdatafile?shema=polymer_parts&name=textbox.html';
                    this.parentNode.appendChild(link);
                    //this.ownerDocument
                    // Polymer.import(['http://localhost/testdatafile?shema=polymer_parts&name=textbox.html'], function() {
                        var name = 'el-'+field.Fieldname;
                        console.log(name);
                        var textbox = document.createElement(name, 'rawc-textbox');
                        console.log(textbox);
                        //t.appendChild(textbox);

                        field.element = textbox;

                        model.fields.push(field);
  //                        var tt = document.querySelector('rawc-detail::shadow '+name);
  //                        console.log('tt=', tt);
  //                        tt.description = 'a dynamic import';

  //                });
                }
                // console.log(field);
            }

            t.model = model;
        }
    }
});

这可能吗？

Answer 1

detail.html

<polymer-element name="rawc-detail" attributes="data">

<template>
    <apply-author-styles></apply-author-styles>

    <h3 title="{{data.Metadata.DescOne}}" class="text-center">{{data.Metadata.TitleOne}}</h3>

    <div class="panel panel-default">
        <div class="panel-body">
            <form class="form-horizontal" role="form">

                <div id="forminner">
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" on-tap="ClickOk()">Ок</button>
                        <button type="button" class="btn btn-primary" on-tap="ClickCancel()">Отмена</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

<style>
</style>

</template>

<script>
  Polymer({
    data:{},
    ready: function() {
        this.fields = [];
    },
    dataChanged: function(oldValue, newValue) {
        this.bindNewData();
    },

    inarray: function(val, arr) {
        for(var i=0; i<arr.length; i++)
            if (arr[i] == val)
                return true;

        return false;
    },

    bindNewData: function() {
        var t = document.querySelector('rawc-detail::shadow #forminner');

        var elementUrls = [];

        for (var i=0; i<this.data.Metadata.Fields.length; i++)
        {
            var field = this.data.Metadata.Fields[i];
            var el = null;
            var name = 'el-'+field.Fieldname;

            if (field.ClientControlType === "textbox")
            {
                el = document.createElement('rawc-textbox');
                el.id = name;
                el.data = this.data.Content[0].Data[field.Fieldname];
                url = 'http://localhost/testdatafile?shema=polymer_parts&name=textbox.html';
                if (!this.inarray(url, elementUrls))
                    elementUrls.push(url);
            }

            var div=document.createElement('div');
            div.className="form-group";

            var label = document.createElement('label');
            label.id = name;
            label.className = "col-sm-2 control-label";
            label.for = field.Name;
            label.innerHTML = field.Title;

            div.appendChild(label);
            if (el != null)
                div.appendChild(el);

            t.appendChild(div);
        }

        for(var i=0; i<elementUrls.length; i++)
            Polymer.import([elementUrls[i]]);
    }
});

</script>

</polymer-element>

textbox.html

<polymer-element name="rawc-textbox" attributes="data">
<template id="textbox">
    <input type="text" value="{{data}}">
    <button on-click="{{clickme}}">go</button>
</template>
<script>
  Polymer(
    {
      clickme:function(e,p,o){
        console.log(this.data);
    }

    });
</script>
</polymer-element>

聚合物。可以在{{}}中渲染元素吗？

1 个答案: