Question

我的问题是，我能够基于数据创建动态控件（文本框，标签），但我希望在UI中预期设计。现在我在管理UI设计时遇到了问题。请看一下预期输出的设计。

  Lunch Start:01:00PM(textbox)         Lunch End:02:00PM(textbox)
  Lunch1 Start:04:00PM(textbox)        Lunch1 End:05:00PM(textbox)

当您看到上述模式时，很快会有Lunch start,Lunch End,lunch1 start,lunch1 End。

我想在控件上动态显示数据。这是VM列表的样子：

<script type="text/javascript">
    ko.applyBindings({TIA: [{ type: 'Lunch Start', clocktime: '01:00 PM' },
            { type: 'Lunch End', clocktime: '02:00 PM' },{  type: 'Lunch1 Start', clocktime: '04:00 PM'  },{  type: 'Lunch1 End', clocktime: '05:00 PM'  }
        ]
    });
</script>

请有人帮我了解如何按照我在UI界面中预期的方式管理此UI设计。

Answer 1

我已经稍微更改了您的虚拟机，因此每行只有一个条目，这样可以轻松使用。

<强> VM

var viewModel = { TIA: [{ description: 'Lunch', startTime: '01:00 PM', endTime: '02:00 PM' },
                        { description: 'Lunch1', startTime: '04:00 PM', endTime: '05:00 PM' }]
    };

ko.applyBindings(viewModel);

<强> HTML

<div data-bind="foreach:TIA">
    <div>
        <label data-bind="text: description + ' Start'"></label>
        <input data-bind="value: startTime"></input>
        <label data-bind="text: description + ' End'"></label>
        <input data-bind="value: endTime"></input>
    </div>
</div>

您当然可以更改html以更好地满足您的需求，也许您会想要使用表格，但这应该会让您了解如何开始使用。在http://jsfiddle.net/ptgoxssj/

进行测试

如何基于knockoutjs中的数据动态创建控件

1 个答案: