We Keep Coding

textarea knockout attr binding for row attribute dont work

I want change height of texterea by knockout 2.3.0
I bind the value of the texterea to "FileData" observable field
and want the texterea rows attribute will changed to the count of rows in "FileData"
the value bind works fine but attr don't work
var self = this;
self.FileData = ko.observable("");
self.lineBreakCount = function(str) {
/* counts \n */
try {
return ((str.match(/[^\n]*\n[^\n]*/gi).length)) + 1;
} catch (e) {
return 0;
}
}
self.buttonClick = function () {
$.get(url, { })
.success(function (serverData) { self.FileData(serverData);})
}
<button type="button" data-bind="click: buttonClick">Click Me</button>
<textarea readonly="readonly" data-bind="value: FileData, attr: { 'rows': lineBreakCount(FileData)}"></textarea>

Your lineBreakCount expects a string, but you're passing it an observable that contains a string.
To fix this, unwrap your observable either in the binding (lineBreakCount(FileData())), or in the method (str().match)
var VM = function() {
var self = this;
self.FileData = ko.observable("");
self.lineBreakCount = function(str) {
/* counts \n */
try {
return ((str.match(/[^\n]*\n[^\n]*/gi).length)) + 1;
} catch (e) {
return 0;
}
}
self.buttonClick = function() {};
};
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button type="button" data-bind="click: buttonClick">Click Me</button>
<textarea data-bind="textInput: FileData, attr: { 'rows': lineBreakCount(FileData())}"></textarea>

Knockout Input ReadOnly State

I am trying to add a simple functionality in my program and Im having a little trouble figuring out how to do something I wanted.
Here's what I got:
My input textbox, with a link beside it to disable/enable readonly property on that input textbox.
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
Edit
</div>
Here's my knockout script for it:
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else self.getreadonlyState('readonly');
}
}
ko.applyBindings(new ViewModel());
This works great, but what I wanted is when I click the edit link, it will change the text of the link to something like: "Stop Editing" so when I click "Stop Editing" the readonly property is enabled again.
Here's a fiddle of what Im working on.
Any help will be greatly appreciated, thank you!

Here's an alternative to #thangcao's answer. I'm not saying this is any better or worse, simply an alternative which uses a subscribe handler instead of a computedObservable.
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
</div>
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.getreadonlyState.subscribe(function(val) {
self.linkText(val === "readonly" ? "Edit" : "Stop editing");
});
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else self.getreadonlyState('readonly');
}
self.linkText = ko.observable("Edit");
}
ko.applyBindings(new ViewModel());
Notice that there's no need for the additional <span> in #thangcao's answer.
Also, why is the "edit"/"stop editing" element an anchor tag? Why not just make it a <span> and do away with the need for the additional inline JavaScript (which you can anyway replace with a return false; inside the readonly function).
http://jsfiddle.net/ajameson/eeTjS/87/

I have updated your Fiddle and hope that it meets your need:
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
<span data-bind="text:linkText"></span>
</div>
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else {
self.getreadonlyState('readonly');
}
}
self.linkText = ko.computed(function(){
return self.getreadonlyState() == 'readonly' ? "Stopping edit" : "Edit";
}, self);
}
ko.applyBindings(new ViewModel());

You can use this binginHandlers :
ko.bindingHandlers.readOnly = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
element.setAttribute("disabled", true);
} else {
element.removeAttribute("disabled");
}
}
};
In my html :
<input type="text" id="create-finess" class="form-control" data-bind="readOnly: _locked" />
Finaly in my JS :
//Constructor of my view model
function ViewModel(resx) {
this._locked = ko.observable();
}
// on init of the page i lock the input
this._load = function () {
this._locked(true);
}

How to make double input writeable ko.computed

I want to write a computed so I can choose between text input and text from a select drop down, but somewhere down the route I´m stuck.
I have an '' collecting my text string
From a '' I can choose among 'Projects'.
Then I have a checkbox which decides whether the text from the selected project should override my input-textstring.
If the is empty. the selected project.title should set it.
This is my code:
HTML:
<input data-bind="textInput: $root.toDo" placeholder="What to do?" /><br/><br/>
<select data-bind="options: $root.Projects, optionsCaption: '< choose project >', optionsText: 'title', value: $root.selected"></select><br/>
<input id="useProjectTitle" type="checkbox" value="toDoUseProjectTitle" data-bind="checked: $root.toDoUseProjectTitle" />
<label for="useProjectTitle">Use project title as action</label>
<div data-bind="with: $root.toDo">
<label>I prefer:</label>
<ul >
<li >
Project: <span data-bind="text: $root.toDoProjectAction"></span><br/> <!-- Project title-->
To do: <span data-bind="text: $root.toDo"></span> <!-- toDo -->
</li>
</ul>
</div>
And my javascript:
Project = function(data){
var self = this;
self.id = data.id;
self.title = ko.observable(data.title);
};
var viewModel = function () {
var self = this;
self.Projects = ko.observableArray();
// data
self.Projects.push(new Project({
id: 1,
title: 'Friday night live'
}));
self.Projects.push(new Project({
id: 2,
title: 'Saturday morning gym'
}));
self.selected = ko.observable();
self.toDoUseProjectTitle = ko.observable(false);
self.toDoProjectAction = ko.computed(function () {
var title;
var project = self.selected();
if (project) {
title = project.title();
}
return title;
});
self.toDo = ko.computed({
read: function (value) {
if (self.selected()) { // not 'undefined' or null
if (self.toDoUseProjectTitle() || value === null) {
value = self.selected().title();
}
}
return value;
},
write: function (value) {
return value;
},
owner: self
});
};
ko.applyBindings(new viewModel());
Fiddle: http://jsfiddle.net/AsleG/srwr37k0/
Where do I go wrong?

I'm not sure I fully understand your desired behavior, but I have modified your Fiddle to use an extra variable and to correct your writable computed. It could be rearranged to work without a writable, but I didn't. :)
self.handEntered = ko.observable('');
self.toDo = ko.computed({
read: function () {
var value = self.handEntered();
if (self.selected()) { // not 'undefined' or null
if (self.toDoUseProjectTitle() || value === null) {
value = self.selected().title();
}
}
return value;
},
write: function (value) {
self.handEntered(value);
},
owner: self
});
http://jsfiddle.net/srwr37k0/14/

Knockout Event Fires twice

in my MVC application im creating multiple Dropdowns by following:
<select data-bind="options: findGroup(1).items(),
optionsText: 'country',
optionsValue: 'id',
value: selectedItem(1),
event: { change: selectionChange }"></select>
the findgroup(x) and the selectedItem(x) are global functions in my ViewModel while those are for all the dropdowns the same.
the selectedItem(x) should return the currently selected Option of the dropdown. selectedItem(x) is a function to return a computed knockout observable.
Now im facing the Problem that the selectionChange Event is fired twice. See this fiddle for an example: http://jsfiddle.net/LGveR/20/
In this example, if you Change the value of the Dropdown box, you can see that the selectionCahnge Event is fired twice.
When i leave the value: selectedItem(x) out (and thus no computed function in the code) it doesnt: see: http://jsfiddle.net/LGveR/21/
I think that second time the Event is being fired Comes from the fact that in the computed function selectedItem(x) the observable
grp.selectedItem(grp.findItemByValue(value));
is setted.
How to prevent that the Setting of this observable leads to a "Change" Event ?
TIA,
Paul
HTML:
<select data-bind="options: findGroup(1).items(),
optionsText: 'country',
optionsValue: 'id',
value: selectedItem(1),
event: { change: selectionChange }"></select> <span data-bind="text: 'aantal: ' + findGroup(1).items().length"></span>
<br /> <span data-bind="text: 'Group Selected Country: ' + findGroup(1).selectedItem().country"></span>
<br /> <span data-bind="text: 'Computed Selected Country: ' + selectedItem(1)().country"></span>
<br /> <span data-bind="text: 'after select: ' + counter()"></span>
<br />
Javascript:
var group = function (id) {
this.id = id;
this.items = ko.observableArray() || {};
this.selectedItem = ko.observable();
this.addItem = function (data) {
this.items.push(data);
};
this.findItemByValue = function (id) {
return ko.utils.arrayFirst(this.items(), function (item) {
return item.id === id;
});
}
};
var grpItem = function (id, country) {
this.id = id;
this.country = country;
};
var ViewModel = function () {
this.groups = ko.observableArray() || {};
this.counter = ko.observable(0);
this.selectionChange = function (data, event, selector, item) {
this.counter(this.counter() + 1);
};
this.addGrp = function (data) {
this.groups.push(data);
};
this.findGroup = function (groupId) {
var ret = ko.utils.arrayFirst(this.groups(), function (c) {
return c.id === groupId;
});
return ret;
};
this.selectedItem = function (groupId) {
var grp = this.findGroup(groupId);
return ko.computed({
read: function () {
return this.findGroup(groupId).selectedItem();
},
write: function (value) {
grp.selectedItem(grp.findItemByValue(value));
}
}, this);
};
};
var vm = new ViewModel();
var p = new group(1);
var a = new grpItem(1, 'holland');
var b = new grpItem(2, 'germany');
var c = new grpItem(3, 'brasil');
p.addItem(a);
p.addItem(b);
p.addItem(c);
vm.addGrp(p);
ko.applyBindings(vm);

You're doing a couple odd things in your code which results in the computed being recomputed a bunch of times. Basically, you're setting the computed value by setting an observable with a function that relies on that observable, which recomputes your computed (or something crazy like that, see http://jsfiddle.net/LGveR/25/ to see how many times read and write are being called). There are a couple simple ways you can simplify and remove this issue:
Remove the optionsValue from your select data-bind. This will set
the value to the entire item in the observable array (instead of
just the id). You can then simplify the computed write function.
<select data-bind="options: findGroup(1).items(),
optionsText: 'country',
value: selectedItem(1),
event: { change: selectionChange }"></select>
and
this.selectedItem = function (groupId) {
var grp = this.findGroup(groupId);
return ko.computed({
read: function () {
return grp.selectedItem();
},
write: function (value) {
grp.selectedItem(value);
}
}, this);
};
see http://jsfiddle.net/LGveR/23/
Alternatively, you could remove the selectedItem on the viewmodel
entirely, and remove the optionsValue (as in #1). Then, you only need the group observable with the following html:
<select data-bind="options: findGroup(1).items(),
optionsText: 'country',
value: findGroup(1).selectedItem,
event: { change: selectionChange }"></select>
<span data-bind="text: 'aantal: ' + findGroup(1).items().length"></span>
<br />
<span data-bind="text: 'Group Selected Country: ' + findGroup(1).selectedItem().country"></span>
...
See http://jsfiddle.net/LGveR/24/

Managing an Array within an Array using KnockoutKS

I have an array within an array, for example I have the following objects:
{ruleGroups: [{
rules: [{
dataField1:ko.observable()
,operator:ko.observable()
,dataField2:ko.observable()
,boolean:ko.observable()
,duration:ko.observable()
}]
}]
};
How can I edit the array within the array?
I was able to improve the issue but still have problems with adding row when adding group, the new group works but the old groups run dead:
A working example is found here (http://jsfiddle.net/abarbaneld/UaKQn/41/)
Javascript:
var dataFields = function() {
var fields = [];
fields.push("datafield1");
fields.push("datafield2");
return fields;
};
var operators = function() {
var operator = [];
operator.push("Plus");
operator.push("Minus");
operator.push("Times");
operator.push("Divided By");
return operator;
};
var booleanOperators = function() {
var operator = [];
operator.push("Equal");
operator.push("Not Equal");
operator.push("Greater Than");
operator.push("Less Than");
operator.push("Contains");
operator.push("Etc...");
return operator;
};
var ruleObj = function () {
return {
dataField1:ko.observable()
,operator:ko.observable()
,dataField2:ko.observable()
,boolean:ko.observable()
,duration:ko.observable()
}
};
var ruleGroup = function() {
return rg = {
rules: ko.observableArray([new ruleObj()]),
addRow: function() {
rg.rules.push(new ruleObj());
console.log('Click Add Row', rg.rules);
},
removeRow : function() {
if(rg.rules().length > 1){
rg.rules.remove(this);
}
}
}
};
var ViewModel = function() {
var self = this;
self.datafields = ko.observableArray(dataFields());
self.operators = ko.observableArray(operators());
self.booleanOperators = ko.observableArray(booleanOperators());
self.groupRules = ko.observableArray([new ruleGroup()]);
self.addGroup = function() {
self.groupRules.push(new ruleGroup());
};
self.removeGroup = function() {
if(self.groupRules().length > 1){
self.groupRules.remove(this);
}
};
self.save = function() {
console.log('Saving Object', ko.toJS(self.groupRules));
};
};
ko.applyBindings(new ViewModel());
HTML
<div data-bind="foreach: { data: groupRules, as: 'groupRule' }" style="padding:10px;">
<div>
<div data-bind="foreach: { data: rules, as: 'rule' }" style="padding:10px;">
<div>
<select data-bind="options: $root.datafields(), value: rule.dataField1, optionsCaption: 'Choose...'"></select>
<select data-bind="options: $root.operators(), value: rule.operator, optionsCaption: 'Choose...'"></select>
<select data-bind="options: $root.datafields(), value: rule.dataField2, optionsCaption: 'Choose...',visible: operator"></select>
<select data-bind="options: $root.booleanOperators(), value: rule.boolean, optionsCaption: 'Choose...'"></select>
<input data-bind="value: rule.duration" />
<span data-bind="click: groupRule.addRow">Add</span>
<span data-bind="click: groupRule.removeRow">Remove</span>
</div>
</div>
<span data-bind="click: $parent.addGroup">[Add Group] </span>
<span data-bind="click: $parent.removeGroup">[Remove Group]</span>
</div>
</div>
<div>
<span data-bind="click:save">[Save]</span>
</div>

I was able to fix the issue by rearranging the function of ruleGroup to:
var ruleGroup = function() {
var rg = {
rules: ko.observableArray([new ruleObj()]),
addRow: function() {
rg.rules.push(new ruleObj());
console.log('Click Add Row', rg);
},
removeRow : function() {
if(rg.rules().length > 1){
rg.rules.remove(this);
}
}
}
return rg;
};
Not exactly sure why this made a difference but I think its due to now a new var is being created and referenced.
Working JSFiddle is found here http://jsfiddle.net/abarbaneld/UaKQn/