Not sure how to manage my data in an observableArray for updating - data-binding

Question

I'm just starting to play around with KO as I want to bring it into an upcoming project. In my spare time I've been playing with a web service at work, this has basically been starting off with doing something with the data, then doing something else. So first I just returned a list of drug names. OK, let's add a count of the returned results. OK, let's populate the individual drug details in a modal. OK, let's edit a drug name. No real rhyme or reason, just coming up with stuff and playing around with KO.
I'm at the point where I'm not sure how to really manage my data so it gets updated everywhere. I've made a screenshot that walks you through what I have and illustrates the problem.
http://i.imgur.com/5qNWQ.jpg
Get my search results by clicking on the "y" button. I then select
the "Yasmin 28" drug
I get the detail view for that drug in a modal window
I edit the drug name and click the "save" button
The drug name is updated in the modal window
I "cheat" and update the drug name in the search results by just
crawling that part of the DOM and replacing the old drug name with
the new drug name.
Problem with this is, it isn't taking advantage of the observable nature of KO...If I were to close the modal and click on the "Yasmin 28" drug link again, the modal would show "Yasmin 28" not what I just changed it to ("something wonderful").
I'm not quite sure how to track if a property changes in my observableArray. I made two observableArrays, one holds the list of drug names for the search results, the other holds the details of the drug. I also made an observable for the current drug name.
Can someone explain what I need to do to track my drug name everywhere? I've included the code below as well as the JSON that I'm working with at the very bottom.
<div id="shell">
<button class="load" value="j">j</button>
<button class="load" value="k">k</button>
<button class="load" value="x">x</button>
<button class="load" value="y">y</button>
<button class="load" value="z">z</button>
<p id="loading"><img src="#{facesContext.externalContext.requestContextPath}/img/spinner.gif"/></p>
<h3 data-bind="visible: drugList().length > 0"><span data-bind="text: count" class="count"></span> records returned</h3>
<ul data-bind="foreach: drugList">
<li>
<span data-bind="text: drugName" class="results_drug_name"></span>
<a data-bind="click: $root.showDetails" href="#" class="show">show details</a>
</li>
</ul>
</div>
<!-- start modal: drug details -->
<div id="dialog" data-bind="jqDialog: {autoOpen: false, title: drugName}">
<p id="dialog_save_message" class="message_success">Changes saved successfully!!!!!!!!</p>
<table data-bind="foreach: drugListDetails" class="table" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<th scope="row">pdlId</th>
<td data-bind="text: pdlId"></td>
</tr>
<tr>
<th scope="row">drugName</th>
<td>
<span data-bind="text: $root.drugName" class="readonly"></span>
<input id="edit_drugname" class="edit_textfield" type="text" value="" size="35" />
<button data-bind="click: $root.editSave" class="edit_buttons save">Save</button>
<button data-bind="click: $root.editCancel" class="edit_buttons cancel">Cancel</button>
<ul class="detail_actions">
<li><a data-bind="click: $root.edit" href="#" class="edit">edit</a></li>
</ul>
</td>
</tr>
<tr>
<th scope="row">dosageFormDesc</th>
<td data-bind="text: dosageFormDesc"></td>
</tr>
<tr>
<th scope="row">strength</th>
<td data-bind="text: strength"></td>
</tr>
<tr>
<th scope="row">activeIngredient</th>
<td data-bind="text: activeIngredient"></td>
</tr>
<tr>
<th scope="row">tier</th>
<td data-bind="text: tier"></td>
</tr>
<tr>
<th scope="row">ancillaryCharge</th>
<td data-bind="text: ancillaryCharge"></td>
</tr>
<tr>
<th scope="row">preauthCode</th>
<td data-bind="text: preauthCode"></td>
</tr>
<tr>
<th scope="row">quantityLimit</th>
<td data-bind="text: quantityLimit"></td>
</tr>
<tr>
<th scope="row">prefAlternative</th>
<td data-bind="text: prefAlternative"></td>
</tr>
<tr>
<th scope="row">specialtyDrug</th>
<td data-bind="text: specialtyDrug"></td>
</tr>
<tr>
<th scope="row">partbCob</th>
<td data-bind="text: partbCob"></td>
</tr>
<tr>
<th scope="row">drugClassGroupId</th>
<td data-bind="text: drugClassGroupId"></td>
</tr>
<tr>
<th scope="row">drugClassId</th>
<td data-bind="text: drugClassId"></td>
</tr>
<tr>
<th scope="row">drugClass</th>
<td data-bind="text: drugClass"></td>
</tr>
<tr>
<th scope="row">genericInd</th>
<td data-bind="text: genericInd"></td>
</tr>
<tr>
<th scope="row">tip</th>
<td data-bind="text: tip"></td>
</tr>
</table>
</div>
<!-- end modal: drug details -->
<script>
$(function() {
$('.load').click(function() {
var $letter = $(this).attr('value');
//show spinner
$('#loading').show();
//load in drug list data
$.getJSON('/PreferredDrugList/service/preferredDrugs/' + $letter, function(data) {
//hide spinner
$('#loading').hide();
//replace drugList observableArray data
//preferredDrugs is an array of objects, each elem is an individual drug
myViewModel.drugList(data.preferredDrugs);
//replace count observable data
myViewModel.count(data.count);
});//end getJSON
});//end click
//setup modal dialog options
$('#dialog').dialog({
autoOpen: false,
closeOnEscape: true,
modal: true,
width:850,
height:500
});
});//end ondomready
//custom binding to initialize a jQuery UI dialog
ko.bindingHandlers.jqDialog = {
init: function(element) {
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).dialog("destroy");
});
},
update: function(element, valueAccessor) {
var options = ko.toJS(valueAccessor());
if (options) {
$(element).dialog(options);
}
}
};
var myViewModel = {
count: ko.observable(), //# of records returned
drugList: ko.observableArray(), //list of drug names - an array of objects
drugListDetails: ko.observableArray(), //list of individual drug details
drugName: ko.observable(), //current drug name
//show drug details in modal
//func gets passed the current observableArray elem (the individual drug info we clicked on, this is an object)
showDetails: function(obj) {
//replace current drug name observable data
myViewModel.drugName(obj.drugName);
//replace drugListDetails observableArray data, otherwise we'll append data to the modal
myViewModel.drugListDetails([]);
//push individual drug info to details observableArray
myViewModel.drugListDetails.push(obj);
//show dialog
$('#dialog').dialog('open');
return false;
},
//edit drug from modal
edit: function(obj) {
var $edit = $('#dialog').find('td .edit'),
$currentTD = $edit.closest('td');
$currentTD.addClass('editing');
$currentTD.find('.readonly').hide();
$currentTD.find('.edit_textfield').show().select();
$currentTD.find('.edit_buttons').show();
return false;
},
//save an edit
editSave: function(obj) {
alert('TODO save back to the server');
var $saveBtn = $('#dialog').find('td .save'),
$currentTD = $saveBtn.closest('td'),
newDrugName = $('#edit_drugname').val(),
$dialog_save_message = $('#dialog_save_message');
//save new drug name to observable
myViewModel.drugName(newDrugName);
$currentTD.removeClass('editing');
$currentTD.find('.readonly').show();
$currentTD.find('.edit_textfield').hide();
$currentTD.find('.edit_buttons').hide();
$dialog_save_message.slideDown('slow', function() {
//animation complete
setTimeout(function() {
$dialog_save_message.slideUp();
}, 3000);
});
//cheat and update search results list with new drug name
$('.results_drug_name').each(function(index, elem) {
var $text = $(this).text();
if ($text === obj.drugName) {
$(this).text(newDrugName).addClass('edited');
}
});
},
//cancel an edit
editCancel: function(obj) {
var $cancelBtn = $('#dialog').find('td .cancel'),
$currentTD = $cancelBtn.closest('td');
$currentTD.removeClass('editing');
$currentTD.find('.readonly').show();
$currentTD.find('.edit_textfield').hide();
$currentTD.find('.edit_buttons').hide();
}
};
ko.applyBindings(myViewModel);
<!--what's returned from the web service-->
<pre>
{
"preferredDrugs": [(8)
{
"pdlId": 8090,
"drugName": "y-cof-dmx",
"dosageFormDesc": "Liquid",
"strength": "4MG/5ML; 15MG/5ML; 7.5MG/5ML",
"activeIngredient": "BROMPHENIRAMINE MALEATE; DEXTROMETHORPHAN HYDROBROMIDE; PHENYLEPHRINE HYDROCHLORIDE",
"tier": "OTC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 74,
"drugClassId": 152,
"drugClass": "Respiratory Tract Agents » Antitussives",
"genericInd": "1",
"tip": " "
},-
{
"pdlId": 13417,
"drugName": "YASMIN 28",
"dosageFormDesc": "Tablet",
"strength": "3MG; 0.03MG",
"activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
"tier": "3",
"ancillaryCharge": "AC",
"preauthCode": " ",
"quantityLimit": "28.0 tabs each 28 days",
"prefAlternative": "ethinyl estradiol/drospirenone",
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 3,
"drugClassId": 200,
"drugClass": "Hormones and Synthetic Substitutes » Contraceptives",
"genericInd": "0",
"tip": " "
},-
{
"pdlId": 24765,
"drugName": "YAZ",
"dosageFormDesc": "Tablet",
"strength": "3MG; 0.02MG",
"activeIngredient": "DROSPIRENONE; ETHINYL ESTRADIOL",
"tier": "3",
"ancillaryCharge": "AC",
"preauthCode": " ",
"quantityLimit": "28.0 tabs each 28 days",
"prefAlternative": "ethinyl estradiol/drospirenone",
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 3,
"drugClassId": 200,
"drugClass": "Hormones and Synthetic Substitutes » Contraceptives",
"genericInd": "0",
"tip": " "
},-
{
"pdlId": 2252,
"drugName": "YERVOY",
"dosageFormDesc": "Solution",
"strength": "50MG/10ML",
"activeIngredient": "IPILIMUMAB",
"tier": "NC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 115,
"drugClassId": 1,
"drugClass": "Antineoplastic Agents",
"genericInd": "0",
"tip": " "
},-
{
"pdlId": 20993,
"drugName": "YERVOY",
"dosageFormDesc": "Solution",
"strength": "200MG/40ML",
"activeIngredient": "IPILIMUMAB",
"tier": "NC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 115,
"drugClassId": 1,
"drugClass": "Antineoplastic Agents",
"genericInd": "0",
"tip": " "
},-
{
"pdlId": 564,
"drugName": "YF-VAX",
"dosageFormDesc": "Injection",
"strength": "0",
"activeIngredient": "YELLOW FEVER VACCINE",
"tier": "NC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 79,
"drugClassId": 284,
"drugClass": "Serums, Toxoids and Vaccines » Vaccines",
"genericInd": "0",
"tip": " "
},-
{
"pdlId": 8910,
"drugName": "yodefan-nf chest congestion",
"dosageFormDesc": "Liquid",
"strength": "200MG/5ML",
"activeIngredient": "GUAIFENESIN",
"tier": "OTC",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": null,
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 84,
"drugClassId": 155,
"drugClass": "Respiratory Tract Agents » Expectorants",
"genericInd": "1",
"tip": " "
},-
{
"pdlId": 13101,
"drugName": "YODOXIN",
"dosageFormDesc": "Tablet",
"strength": "650MG",
"activeIngredient": "IODOQUINOL",
"tier": "3",
"ancillaryCharge": "NA",
"preauthCode": " ",
"quantityLimit": " ",
"prefAlternative": "iodoquinol",
"specialtyDrug": " ",
"partbCob": " ",
"drugClassGroupId": 164,
"drugClassId": 277,
"drugClass": "Anti-infective Agents » Antiprotozoals",
"genericInd": "0",
"tip": " "
}-
],-
"count": 8
}
</pre>
</script>

Answer 1

First, remove the drugListDetails array as it causes confusion by holding a duplicate of your data.
Second, use ko.mapping.fromJS and ko.mapping.toJS to map your data.preferredDrugs to and from an observable array. This will allow knockout to track the changes in the GUI for every element of the array. Documentation for these can be found here.
You can also do the mapping manually if you do not want to use the mapping plugin.
Third, add a new showDetails element to each entry in your data.preferredDrugs array that defaults to false. This will be used in the next step to determine if the dialog should be shown or not. The showDetails element will need to be toggled when the existing $root.showDetails is called.
Fourth, modify the dialog div to use the drugList array and bind its visible value to the showDetails value of each drug element. This will create multiple hidden dialogs, so you may want to change the id value of each.