0

ネストされたコレクションがあります... オブジェクトのコレクション (LearningPath) で、それぞれにコレクション (LearningItems) があります。UI では、すべての LearningPath のテーブルをバインドしてから、各 LearningPath の LearningIUtem の SELECT ボックスをバインドしました。アイテムを選択すると、選択したアイテムは常にキャプション アイテムに戻ります。選択したアイテムの値を設定していないようです。

オブジェクトとビュー モデルは次のようになります。

// 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();
};

バインディングは次のとおりです。

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();
});

そしてこちらがセレクトボックス…

<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>
4

1 に答える 1

1

selectedLearningItemプロパティはCPT.LearningPathオブジェクト内にある必要があります。実装では、各行から選択した値を格納するための同じプロパティがあるためです。

ここに作業中のフィドルがあります：http：//jsfiddle.net/vyshniakov/w72bn/

于 2012-11-06T17:16:14.287 に答える