I have an app where I want to add extra elements to an item in an array, I have created a fiddle of what I'm trying to achieve.
So the user starts the app, they click next fill in some details of an item and a description, they then should click next and fill in a price for the item(this is where I'm stuck). This example works up to a point, as in whenever I try and implement the price part I seem to be getting it wrong. You'll see once I click next the item is added to the array, however how do add more elements to the current item in the array. In case I've not made sense the logic should be:
Start Page one (enter name and description) Page two (enter price)
I understand I could do this all on one page but I don't want to I want knockout to be able to add a price after the name and description page. I would also like to be able to go back and amend the item. Can you anybody help in seeing what I should be doing next?
When I insert the name and description, do I have to also make an empty element in the array for the price? Then once the price is entered somehow insert this into the price element in the array? Not sure how/if this should be implemented.
This is my first knockout app so I be surprised if what I've actually done is correct, any help or pointers gratefully received :)
My code is below:
$(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>
