[英]Dynamically adding items to HTML list
I'm currently building a wizard in asp.net MVC 5 application using knockout. 我目前正在使用淘汰赛在asp.net MVC 5应用程序中构建向导。 On one of the steps, I need to add items to an html list.
在其中一个步骤中,我需要将项目添加到html列表中。 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. self.Model.CurrentStep()。ProductServices是一个列表产品,只是一个属性名称。
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. 上面的代码将一个项目添加到html列表中并更新UI,但是self.Model.CurrentStep()。ProductServices.length始终为零,这意味着没有向模型本身添加任何内容。
Please how can I force it to update the self.Model.CurrentStep().ProductServices? 请如何强制其更新self.Model.CurrentStep()。ProductServices?
length
is not a property of an observableArray
. length
不是observableArray
的属性。 Check ProductServices().length
instead. 而是检查
ProductServices().length
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.