【发布时间】：2017-10-05 03:45:16
【问题描述】：
我有一个应用程序，我想向数组中的项目添加额外的元素，我有 created a fiddle 我想要实现的目标。
所以用户启动应用程序，他们单击下一步填写项目的一些详细信息和描述，然后他们应该单击下一步并填写项目的价格（这是我卡住的地方）。这个例子在一定程度上起作用，就像每当我尝试实现价格部分时，我似乎都弄错了。一旦我单击下一步，您就会看到项目被添加到数组中，但是如何向数组中的当前项目添加更多元素。如果我没有理解逻辑应该是：
开始 第一页（输入名称和描述） 第二页（输入价格）
我知道我可以在一个页面上完成所有这些操作，但我不想让淘汰赛能够在名称和描述页面之后添加价格。我还希望能够返回并修改该项目。有人能帮忙看看我接下来应该做什么吗？
当我插入名称和描述时，我是否还必须在数组中为价格创建一个空元素？然后，一旦输入价格，以某种方式将其插入到数组中的价格元素中？不确定如何/是否应该实施。
这是我的第一个淘汰赛应用程序，所以如果我实际所做的事情是正确的，我会很惊讶地收到任何帮助或指点 :)
我的代码如下：
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
// Operations
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled()
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
$('#back').on('click', function(e) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: addItem">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>【问题讨论】：
-
我注意到您正在使用 jquery 进行点击事件。您应该使用 KO 绑定。它们更好，因为从 HTML 中可以清楚地看到发生了什么
-
“如何向数组中的当前项添加更多元素”是什么意思。目前尚不清楚您的问题是什么
-
您是说希望能够编辑当前值吗？
-
还有一些变量名是驼峰式的，有些不是。尽量保持一致
标签： javascript jquery arrays knockout.js