In my use of Typescript to define the Knockout ViewModel, I encountered an issue.
A JSON file with a detailed structure can be viewed here (as it's too large to paste here).
The structure follows this pattern:
OrderLine (root) -> milestones -> factory_date
To simplify, numerous order lines have several milestones, each with one factory date.
Attempting to construct a ViewModel led me to this code snippet:
var FactoryAppViewModel = (function () {
function FactoryAppViewModel(seasonID) {
var self = this;
self.seasonID = seasonID;
self.orderlines = ko.observableArray([]);
this.buildViewModel();
}
FactoryAppViewModel.prototype.buildViewModel = function () {
var self = this;
var getOrderLines = HTTP.get("/season/" + self.seasonID + "/orderlines").done(function (data) {
self.orderlines(JSON.parse(data));
}).fail(function () {
error("Could not get orderlines");
});
};
It appears that applying a `ko.observable` to the child elements (milestones) of order lines and to another child (factory_date) is challenging. The method remains unknown, especially when extracting from JSON data.
Despite reading this resource, resolving this matter has proven difficult.
Observably, changing a `factory_date` in the view does not reflect back on the ViewModel, suggesting an oversight in implementation.
Your assistance in rectifying this dilemma would be highly valued. Note that the JavaScript provided above represents the compiled TypeScript.
EDIT:
Here is how I'm accessing the code in the view:
<tbody data-bind="foreach: orderlines">
<tr>
<td data-bind="text: factory.name"></td>
<!-- ko foreach: milestones -->
<!-- ko if: factory_date == null -->
<td>
<span>TBA</span>
</td>
<!-- /ko -->
<!-- ko if: factory_date !== null -->
<td>
<div class="wrapper-wrapper">
<div class="btn btn-primary dateChanger">
<span data-bind="text: moment(factory_date.milestone_date).format('DD-MM-YYYY')"></span>
</div>
<div class="date-update-wrapper text-center">
<input type="text" data-bind="attr: {value: moment(factory_date.milestone_date).format('DD-MM-YYYY')}" class="form-control datetimepicker">
<a class="save-date btn btn-success" data-bind="click: function(){$root.saveDate(factory_date, $parent)}"><i class="fa fa-check"></i></a>
<a class="cancel-date btn btn-danger"><i class="fa fa-times"></i></a>
</div>
</div>
</td>
<!-- /ko -->
<!-- /ko -->
</tr>
</tbody>
An omission in my approach was highlighted with this specific section:
data-bind="click: function(){$root.saveDate(factory_date, $parent)}"
Upon testing a simple `saveDate` method, logging `factory_date.milestone_date`, displayed the original JSON data, despite modifications made through the datepicker in the view.