Динамическое добавление элементов в список HTML

В настоящее время я создаю мастер в приложении asp.net MVC 5 с использованием нокаута. На одном из шагов мне нужно добавить элементы в список html. то есть текст вводится в текстовое поле и вы нажимаете кнопку «добавлено», текст добавляется в список.Динамическое добавление элементов в список HTML

Мой шаблон:

<script type="text/html" id="addProduct"> 
<li class="dd-item bordered-inverse animated fadeInDown"> 
    <div class="dd-handle dd-nodrag"> 
     <div class="checkbox"> 
      <label> 
       <a data-bind="attr: { 'href': '#' }" class='btn btn-xs icon-only success'><i class="fa fa-trash-o"></i></a> 
       <label data-bind="text: Name, uniqueName: true"></label> 
      </label> 
     </div> 
    </div> 
</li> 
</script> 

<div class="row"> 
    <div class="col-md-6"> 
    <div id="newProduct" class="dd"> 
     <ol class="dd-list" data-bind="template: { name: 'addProduct', foreach: Model.Step1.ProductServices }"></ol> 
    </div> 
    </div> 
</div>

ввода текстового поля:

@Html.TextBoxFor(model => model.Step1.ProductService, new { data_bind = "value: Model.Step1.ProductService") 

<button type="button" id="addservice" data-bind="event:{ click: AddProduct }">Add Service/Product</button>

Нокаут добавить событие:.

self.AddProduct = function() { 
    self.Model.CurrentStep().ProductServices.push({ name: self.Model.CurrentStep().ProductService }); 
}

self.Model.CurrentStep() ProductServices является список товаров, как только одно имя свойства.

Код, указанный выше, добавляет элемент в список html и обновляет пользовательский интерфейс, но self.Model.CurrentStep(). ProductServices.length всегда равен нулю, что означает, что в самой модели ничего не добавлено.

Как я могу заставить его обновить self.Model.CurrentStep(). ProductServices?

источник

2016-02-21 capiono

Возможный дубликат [Почему ko.observableArray.length не возвращает длину базового массива?] (Http://stackoverflow.com/questions/16339158/why-doesnt-ko-observablearray-length-return-length-length- из-лежащих в основе-массив) – Jeroen

length не является собственностью компании observableArray. Проверьте вместо этого ProductServices().length.

источник

2016-02-21 15:17:57

Динамическое добавление элементов в список HTML

ответ

Смежные вопросы