Question

I’ve got a nested collection… collection of objects (LearningPath) and each has a collection (LearningItems) within it. In the UI I’ve bound a table for all the LearningPaths, then a SELECT box for each LearningPath’s LearningIUtems. When I select an item, the selected item always goes back to the caption item. It’s almost like it isn’t setting the value of my selected item.

Here’s what the objects and view model looks like:

// namespace
var CPT = CPT || {};

// entities
CPT.LearningItem = function (liId, liTitle, liDescription, liType, liUrl) {
  this.id = liId;
  this.title = liTitle;
  this.description = liDescription;
  this.itemType = liType;
  this.url = liUrl;
};

CPT.LearningPath = function (lpId, lpTitle, lpDescription, lpPublishDate, lpPublishedBy) {
  this.id = lpId;
  this.title = lpTitle;
  this.description = lpDescription;
  this.pubDate = lpPublishDate;
  this.pubBy = lpPublishedBy;
  this.status = "";
  this.learingItems = ko.observableArray();

  if (this.pubDate !== null)
    this.status = "Published";
  else
    this.status = "Unpublished";
};

// view model
CPT.ViewModel = function () {
  this.selectedLearningItem = ko.observable();
  this.learningPaths = ko.observableArray();
};

Here’s the binding:

var learningPathsViewModel;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
  // setup view model
  learningPathsViewModel = CPT.ViewModel.Init();
});

And here’s the select box…

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Status</th>
      <th>Learning Items</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: learningPaths">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: title"></td>
      <td data-bind="text: status"></td>
      <td>
        <select data-bind="optionsCaption: 'Select to view details...',
                            options: learingItems,
                            optionsText: 'title', 
                            value: learningPathsViewModel.selectedLearningItem">
        </select>
      </td>
    </tr>
  </tbody>
</table>
  <div class="displayBox"
    data-bind="with: selectedLearningItem">
  <h2>Learning Paths</h2>
    Selected item: (id:<span data-bind="text: id" />) <span data-bind="text: title" />
  </div>

Answer 1

selectedLearningItem property should be inside CPT.LearningPath object. Because in your implementation there is the same property for storing selected values from each row.

Here is working fiddle: http://jsfiddle.net/vyshniakov/w72bn/