<h1 style="margin: 5px 20px; width:98%; text-decoration: underline; ">Title Of The Document</h1>
<ul class="list-group list-group-flush" data-bind="foreach: tasks" style="overflow: auto; height:800px">
@*<ul class="list-group list-group-flush" data-bind="foreach: tasks, visible: tasks().length > 0" style="overflow: auto; height:auto">*@
<li class="list-group-item">
<div class="card border-dark mb-3" style="max-width: 65rem; ">
<div class="card-header">
<input style="width:95%" class="form-control" type="text" placeholder="Main Header" data-bind="value: header.mainHeader" />
<button data-bind='click: secondaryHeaderEnable'>Click me</button>
<input style="margin: 5px 15px; width:95%" class="form-control" type="text" placeholder="Secondary Header"
data-bind="value: header.secondaryHeader, disable: header.isSecondaryHeaderEnable"/>
<button data-bind='click: thirdHeaderEnable'>Click me</button>
<input style="margin: 5px 30px; width:95%" class="form-control" type="text" placeholder="Third Header"
data-bind="value: header.thirdHeader, disable: header.isThirdHeaderEnable"/>
</div>
<div class="card-body text-dark">
<input data-bind="value: title" />
</div>
</div>
<a href="#" data-bind="click: $parent.removeTask">Delete</a>
</li>
</ul>
<form data-bind="submit: addTask">
<button type="submit">Add</button>
</form>
<script type="text/javascript">
function Task() {
this.title = ko.observable();
this.header = new HeaderControll();
this.thirdHeaderEnable = function(data, event) {
alert("Work");
this.header.isThirdHeaderEnable = !this.header.isThirdHeaderEnable
this.header.thirdHeader = "";
};
this.secondaryHeaderEnable = function(data, event) {
alert("Work");
this.header.isSecondaryHeaderEnable = ko.observable(!this.header.isSecondaryHeaderEnable);
this.header.secondaryHeader = ko.observable("");
};
}
function HeaderControll() {
this.mainHeader = ko.observable("");
this.secondaryHeader = ko.observable("");
this.thirdHeader = ko.observable("");
this.isSecondaryHeaderEnable = ko.observable(false);
this.isThirdHeaderEnable = ko.observable(false);
}
function TaskListViewModel() {
var self = this;
self.tasks = ko.observableArray([]);
// Operations
self.addTask = function () {
self.tasks.push(new Task());
};
self.removeTask = function (task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel());
</script>
--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.