Knockout stops updating observable after unpacking property - javascript

Just noticed some unexpected behaviour in knockout.js - Got some code that loops round an observableArray and repeats some bound HTML elements for each item in the array. One of the items is a property on a sub-object:
<tbody data-bind="foreach: Contact">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Project().Name"></td>
<td data-bind="text: Percentage"></td>
</tr>
</tbody>
This renders fine on page load. But if the user performs actions that end up changing the Contact array or the items inside it, Name and Project().Name update but Percentage does not, even though stepping through shows it has the correct value.
However, if I remove the unpacked sub-object:
<tbody data-bind="foreach: Contact">
<tr>
<td data-bind="text: Name"></td>
<td></td>
<td data-bind="text: Percentage"></td>
</tr>
</tbody>
Everything works perfectly.
What's going on here, and is there a fix better than using a computed observable or somesuch to calculate and hold my Project().Name value?

try this
<td data-bind="text: ko.computed(function() { return Project().Name() })"></td>
if you need 2-way binding, you can use writable computed

Related

Unable to access a dynamically generated dropdownlist item. It comes as undefined

I am working on a webpage which has a tabstrip depending on number of people in a deal. As it can be 1 for one deal and 3 for another, I have created the drop down items dynamically using a loop index.
<tr>
<td align="right">
<spring:messagecode="label.borrower.employer.status" />:
</td>
<td align="right">
<kendo:dropDownList name="employmentStatus${requestScope.loopIndex}"
dataTextField="text" dataValueField="value" style="width: 100%;"
select="employmentStatusOnClick(${requestScope.loopIndex})"
change="updateEmploymentInfo">
<kendo:dataSource data="${borrowerEmploymentStatus}"></kendo:dataSource>
</kendo:dropDownList>
</td>
I am able to see the drop down lists according to the number of people in a deal. However, this jsp is included in another main jsp and the "change" and "select" functions are in that main jsp. When a value is selected on a drop down, I want to capture it and then perform some operations.
<script>
function employmentStatusOnClick(index) {
console.log(exp.loopCounter);
console.log("counter: "+index);
var employmentStatusVal = $("#employmentStatus"+index).data(
"kendoDropDownList").text();
console.log(employmentStatusVal);
}
</script>
For output, I can see that the value of index is coming correctly. However, even before the page is fully loaded, i get the error that "TypeError: Cannot read property 'text' of undefined"
Things I have Tried So far:
1) Tried to add the script inside ready() function, but it then gives me an error that employmentStatusOnClick is not defined
2) Tried different variations of concatenating the index value with the base name of the drop down list
3) Tried passing the value into a variable and then putting it into the .text() function
4) Latest, I have even tried hardcoding the value of index as 0 to see if it works for the first case, but i still get the undefined error.
I suspect that it has to do something with the loading of the elements. For some reason, it is trying to run this code, even before the element name has been generated. I discussed with a friend and he suggested me to remove the select events and just use the change event instead. Tried that..no effect.
Now, I am planning to remove kendo drop-downs and just use javascript dropdowns as a last resort. Can you please suggest what could be the problem?
Update - HTML Code of the div from Browser:
<div id="tab-employment">
<table>
<tbody><tr>
<td>
<table border="1">
<tbody><tr>
<th>Employer Name</th>
<th>Occupation</th>
<th>Employment Status</th>
<th>Hiring Date</th>
</tr>
<tr align="center">
<td>Roagres</td>
<td>Assistant</td>
<td>Current</td>
<td>2018-03-12 11:59:06.0</td>
</tr>
</tbody></table>
</td>
<td style="width: 1%"></td>
<td>
<table style="display: inline-block;">
<tbody><tr>
<td align="right">Employment Status:</td>
<td align="right"><input name="employmentStatus0" style="width: 100%;" id="employmentStatus0"><script>jQuery(function(){jQuery("#employmentStatus0").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":employmentStatusOnClick(0),"dataSource":{"data":[{"text":"--Select--","value":"--Select--"},{"text":"Employed","value":"Employed"},{"text":"Self-Employed","value":"Self-Employed"},{"text":"Retired","value":"Retired"},{"text":"Seasonal","value":"Seasonal"},{"text":"Student","value":"Student"},{"text":"Unemployed","value":"Unemployed"},{"text":"TEST","value":"TEST"}]}});})</script></td>
</tr>
<tr>
<td align="right">Industry Sector:</td>
<td align="right"><input name="industryStatus" style="width: 100%;" id="industryStatus"><script>jQuery(function(){jQuery("#industryStatus").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":industryStatusOnClick,"value":"1","dataSource":{"data":[{"text":"--Select--","value":"8443"},{"text":"Agriculture/Fishing/Forestry/Mining","value":"8444"},{"text":"Food/Foodservice/Hospitality","value":"8445"},{"text":"Arts/Entertainment/Recreation/Sports","value":"8446"},{"text":"Insurance, Accounting and Banking","value":"8447"},{"text":"Design/Creative","value":"8448"},{"text":"Construction & Skilled Trades","value":"8449"},{"text":"Education and Training","value":"8450"},{"text":"Government/Public Administration","value":"8451"},{"text":"Engineering/Architecture","value":"8452"},{"text":"Manufacturing/Production/Operation","value":"8453"},{"text":"Medical and Healthcare","value":"8454"},{"text":"Media/Telecommunication/Communication","value":"8455"},{"text":"Religion","value":"8456"},{"text":"Legal Services","value":"8457"},{"text":"Emergency and Protection","value":"8458"},{"text":"Real Estate","value":"8459"},{"text":"Professional, Scientific, and Technical Services","value":"8460"},{"text":"Information Technology","value":"8461"},{"text":"Transportation and Utilities","value":"8462"},{"text":"Sales/Marketing/Retail","value":"8463"}]}});})</script></td>
</tr>
<tr>
<td align="right">Express Occupation:</td>
<td align="right"><input name="expressOccupation" style="width: 100%;" id="expressOccupation"><script>jQuery(function(){jQuery("#expressOccupation").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":expressOccupationOnClick,"value":"1"});})</script></td>
</tr>
<tr>
<td align="right">Other - Specify:</td>
<td align="right"><input type="text" id="otherSpecify" name="otherSpecify" disabled="disabled" class="k-textbox" style="width: 100%;"></td>
</tr>
<tr>
<td colspan="2">
<div id="empStatusMsg" style="margin: 0 0 0 0; color: red; width: 300px; float: right;"></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
So guys, finally I was able to figure this out. Seems like the issue was with the kendo tag libraries or atleast my implementation of them. Before the page was even loaded, the change event was being fired up.
Therefore, I removed the change event from the kendo tag definition and rather used the jquery on change event nested inside document.ready(). After this it started working fine.

How can I get a input's value and redirect to the specified HREF in one click?

I'd done tried using my JavaScript to get information from the input to the localStorage.
However, when I add a link which need to perform at the same time, the information cannot store into localStorage.
This is my HTML:
<div class="list">
<a class="item">
<table>
<tr>
<td width="100">Name</td>
<td>:{{object.name}}</td>
</tr>
<tr>
<td>Description</td>
<td>:{{object.description}}</td>
</tr>
<tr>
<td>No of Pages</td>
<td>:{{object.pages}}</td>
</tr>
</table>
</a>
</div>
This is my JS:
$scope.bookep = function(object) {
$localStorage.bookinfo=object;
$localStorage.bookno=$scope.book.indexOf(object);
location.href="editbook.html";
};
Even if I use location.href="editbook.html"; in JavaScript or use a href="editbook.html"; in html code both only redirect to the link, but the value does not get stored.

Getting the current 'foreach' item inside a context of 'with' binding

Suppose we have the following layout:
<tbody data-bind="foreach: items">
<tr>
<td data-bind="with: $parent.inplaceEditorVm">
<span data-bind="text: $parent.$data.OwnrPrefs"></span>
</td>
</tr>
</tbody>
How can we access the properties of the current foreach item in the context of the with binding?
I.E. In the example above, what do we need to write in a data-bind expression for the span element to get the value of the OwnrPrefs of the current foreach item?
When I'm using $parent.$data.OwnrPrefs like in the above example, it throws:
TypeError: Unable to get property 'OwnrPrefs' of undefined or null
reference
And when I'm trying to use $data.OwnrPrefs, the value of this expression is resolved to undefined, since the $data inside the scope of the with binding is the inplaceEditorVm object, not the current foreach item.
Bindings such as with and foreach create new binding contexts. The outer/original context, ie the one outside the with, is available as $parent - this is what $parent refers to, it's not (directly) related to your viewmodel structure, but rather the bindings on the page.
In your case, you can do:
<tbody data-bind="foreach: items">
<tr>
<td data-bind="with: $parent.inplaceEditorVm">
<span data-bind="text: $parent.OwnrPrefs"></span>
</td>
</tr>
</tbody>

Update model based on ng-repeat of array

Sorry if you find this question's solution is simple or silly.
Need suggestions or solution on this angular part.
I have an object containing array("value"), as shown below.
scope.resp.DefaultData.graphRowData = [
{YName:"Mary", value:[1,4], points:1},
{YName:"Tom", value:[2,5], points:1}
];
My Code viewer uses this style to render the array.
<table>
<tbody>
<tr ng-repeat="rowLabels in resp.DefaultData.graphRowData track by $index">
<th>
<input type="text" value="{{rowLabels.YName}}" ng-model="rowLabels.YName"/>
</th>
<td ng-repeat="value in rowLabels.value track by $index">
<input type="text" ng-model="value"/>
</td>
</tr>
</tbody>
</table>
The html viewer would render like below way:
<table>
<tbody>
<th>Mary</th><td>1</td><td>4</td>
<th>Tom</th><td>2</td><td>5</td>
</tbody>
</table>
Now to my question:
The table displays the data as per the model but if i try to update the table with custom or edit the values, doesn't update the model and the value remains same
For example: Mary has two tags of 1 and 4 values, if I try to change the 1 to 2 and 4 to 5, the data inside the model remains same without update.
Is there any way to fix in my code or should I change the array into array of objects like below
value:[{val:1},{val:4}]
and so ... for other objects under resp.DefaultData.graphRowData? Then it would work fine. Just confused why for array not working in angular js in my code! :(
You need to pass a reference of array instead of value in ng-model
<tr ng-repeat="rowLabels in resp.DefaultData.graphRowData track by $index">
<th>
<input type="text" value="{{rowLabels.YName}}" ng-model="rowLabels.YName"/>
</th>
<td ng-repeat="value in rowLabels.value track by $index">
<input type="text" ng-model="rowLabels.value[$index]"/>
</td>
</tr>
check this working plunker

Durandal / Knockout - Creating viewModel from server data prior to bindings

Sorry as this questions is mainly Knockout, but is in Durandal so the viewModel and some bindings my not look familiar to ko anwser contributors.
Basically my view is comprised of a table that renders server data:
view.html
<table class="table">
<tr>
<td>Company</td>
<td data-bind="text: Company"></td>
</tr>
<tr>
<td>First Name</td>
<td data-bind="text: FirstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td data-bind="text: LastName"></td>
</tr>
</table>
I am on ASP.net so of course I use signalR to get my server data which represents each value in the table. This is an asynchronous call so it does not block the Durandal Composition callback which will do the Knockout bindings.
viewModel.js
define(['services/logger', 'global/session', 'jquery', 'knockout', 'knockout-mapping', 'hubs'],
function ($, ko, komapping) {
ko.mapping = komapping; // Needed
var myChildModel = function (Id) {
this.activate = function () {
$.connection.hub.start().done(function () {
con.server.getDetails(Id).done(function (data) {
ko.mapping.fromJS(data, {}, this);
console.log(data);
});
});
};
};
return myChildModel;
});
I REALLY want to take the server return and map it into the viewModel itself as shown above as I can then account for changes in the data on the server-side automatically (not included or relevant at this point), but as the viewModel does not exist prior to the binding callback
Causing the expected error:
Unable to process binding "text: function (){return Company }"
Message: Company is not defined; View: widgets/customerInfo; ModuleId:
widgets/customerInfo
To negate this issue I want to stop the Knockout applyBindings, then call it manually on my server return .done call back.
The Durandal docs do say you can stop the bindings, but does not include an example how or whether it is possible to have it apply the bindings manually when you want.
Durandal Docs
Has anyone been able to deploy this technique before, maintaining the viewModel comes from the server, and is not created then hydrated after, or has deployed a similar technique with the same outcome.
This seems like a trivial problem to solve but why not just add a conditional if above it?
<table class="table" data-bind="if: isLoaded">
<tr>
<td>Company</td>
<td data-bind="text: Company"></td>
</tr>
<tr>
<td>First Name</td>
<td data-bind="text: FirstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td data-bind="text: LastName"></td>
</tr>
</table>
and just set isLoaded to false until your data is loaded async?

Categories