I've started learning Knockout and I'm having some trouble. I've observable Array, which have some buttons. I need: Example:
I click second button 'lock' and visible second span 'lock', hide second span 'unlock'. And this should be one function 'lock'.
etc.
I don't know... How to do it ?
Help, please!
This is my model:
function newNames() {
var self = this;
self.btnClick = ko.observable(true);
self.newName = ko.observable();
self.names = ko.observableArray([
{id: 1, name: 'Name1'},
{id: 2, name: 'Name2'},
{id: 3, name: 'Name3'}
]);
self.lock = function () {
self.btnClick(false);
};
self.unlock = function () {
self.btnClick(true);
};
self.clickRename = function () {
for (var i = 0; i < self.names().length; i++) {
if (self.btnClick() == false) {
} else {
self.names.replace(self.names()[i], {
name: self.newName()
});
}
}
};
};
ko.applyBindings(new newNames());
This is the html:
<div class="form-group">
<input type="text" class="form-control" data-bind="value: newName">
<button type="button" class="btn" data-bind="click: clickRename">
RENAME
</button>
</div>
<div class="group" data-bind="foreach: names">
<div class="form">
<!-- hidden: $parent.btnClick() == false, visible: $parent.btnClick() == true
$parent.btnClick() == false -->
<span id="span1" data-bind="visible: $parent.btnClick">unlock</span>
<span id="span2" data-bind="hidden: $parent.btnClick() == true, visible: $parent.btnClick() == false">lock</span>
<input type="text" class="form-control" data-bind="value: name">
<button type="button" class="btn" data-bind="click: $root.lock">
LOCK
</button>
<button type="button" class="btn" data-bind="click: $root.unlock">
UNLOCK
</button>
</div>
</div>
You can try with this. Anyway you can improve the code adding a computed property on object array with label for the button.
I have passed a value to the click of button where setup the corresponding new property lock and consequently show/hide the corresponding span.
<div class="form-group">
<input type="text" class="form-control" data-bind="value: newName">
<button type="button" class="btn" data-bind="click: clickRename"> RENAME </button>
</div>
<div class="group" data-bind="foreach: names">
<div class="form">
<span id="span1" data-bind="visible: lock() == true">unlock</span>
<span id="span2" data-bind="visible: lock() == false">lock</span>
<input type="text" class="form-control" data-bind="value: name">
<button type="button" class="btn" data-bind="click: function(data, event) { $parent.lock(!lock(), data, event); }">
<span data-bind="visible: lock() == false">LOCK</span>
<span data-bind="visible: lock() == true">UN-LOCK</span>
</button>
</div>
</div>
<script>
function newNames() {
var self = this;
self.btnClick = ko.observable(true);
self.newName = ko.observable();
self.names = ko.observableArray([
{ id: 1, name: 'Name1', lock: ko.observable(false) },
{ id: 2, name: 'Name2', lock: ko.observable(false) },
{ id: 3, name: 'Name3', lock: ko.observable(false) }
]);
self.lock = function (value, data, event) {
console.log(data);
data.lock(value);
};
self.clickRename = function () {
for (var i = 0; i < self.names().length; i++) {
if (self.btnClick() == false) {
} else {
self.names.replace(self.names()[i], {
name: self.newName()
});
}
}
};
};
ko.applyBindings(new newNames());
</script>