将项目动态添加到 HTML 列表

Question

我目前正在使用淘汰赛在 asp.net MVC 5 应用程序中构建一个向导。在其中一个步骤中，我需要将项目添加到 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 列表添加了一个项目并更新了 UI，但 self.Model.CurrentStep().ProductServices.length 始终为零，这意味着模型本身没有添加任何内容。

请问如何强制它更新 self.Model.CurrentStep().ProductServices？

Answer 1

length 不是 observableArray 的属性。请改用ProductServices().length。