Dynamically adding items to HTML list

Question

I'm currently building a wizard in asp.net MVC 5 application using knockout. On one of the steps, I need to add items to an html list. that is, text is enter into a textbox and you click the added button, the text is added to the list.

My template:

<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>

input textbox:

@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>

knockout add event:

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

self.Model.CurrentStep().ProductServices is a List Product as just one property name.

The code above add an item to the html list and updates the UI, but self.Model.CurrentStep().ProductServices.length is always zero, meaning nothing was added to the Model itself.

Please how can I force it to update the self.Model.CurrentStep().ProductServices?

Answer 1

length is not a property of an observableArray . Check ProductServices().length instead.