javascript - 从“{Input:{'A':'System.Int32','B':'System.Int32'}, Output:System.Int32}”生成 html

Question

我将元数据作为字符串获取，例如“{Input:{'A':'System.Int32','B':'System.Int32'}, Output:System.Int32}”

我正在使用 knockout.js，也可以使用 json.parse。但是有什么简单的方法可以生成一个输入表单，让用户提交输入属性的数据。（将元数据更改为属性列表会更好吗？

Answer 1

我用它来生成属性数组。

self.input = ko.observableArray([]);
if (data.MetaData) {
  //  alert(data.MetaData);
    var d = JSON.parse(data.MetaData).Input;
    for (var prop in d) {
        self.input.push({name:ko.observable(prop),type:d[prop],value:ko.observable('')});
    }
}

和查看：

    <ul data-bind="foreach:test().input">
        <li >
            <label data-bind="text:name, uniqueFor: name"></label>
            <input placeholder="value" data-bind="value:value, uniqueId: name"/>
        </li>
    </ul>

和绑定：

ko.bindingHandlers.uniqueId = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);

        element.id = value.id;
    },
    counter: 0,
    prefix: "unique"
};

ko.bindingHandlers.uniqueFor = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);

        element.setAttribute("for", value.id);
    }
};