Как динамически создавать элементы управления на основе данных в knockoutjs

Question

Мой вопрос: Я могу создать динамический элемент управления (текстовое поле, ярлык) на основе данных, но я хочу, чтобы ожидаемый дизайн в пользовательском интерфейсе. Теперь я столкнулся с проблемой при управлении дизайном пользовательского интерфейса. Пожалуйста, посмотрите на дизайн, который ожидается выход.

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> 

Пожалуйста, кто-нибудь помочь мне, как управлять этим дизайн пользовательского интерфейса, как я ожидал в экране пользовательского интерфейса.

Answer 1

Я немного изменил вашу виртуальную машину, поэтому у вас есть только одна запись в строке, что упростит работу.

В.М.

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/