綁定選擇框中的選定項不會粘住

我有一個嵌套的集合...對象集合（LearningPath），每個對象都有一個集合（LearningItems）。在UI中，我爲所有LearningPath綁定了一個表，然後爲每個LearningPath的LearningIUtems選擇一個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>

來源

2012-11-06 Andrew Connell

selectedLearningItem屬性應在CPT.LearningPath對象內。因爲在你的實現中，每行都有相同的屬性來存儲選定的值。

這裏是工作提琴：http://jsfiddle.net/vyshniakov/w72bn/

來源

2012-11-06 17:16:14

OK，幫助...但隨後呈現的另一個挑戰：我有表所選項目以外的詳細視圖......我想只有一個項目在表格中可以選擇，所以如果您從框A然後選擇框B選擇，則A將返回到默認值。然後我需要更新詳細視圖。我更新了原始問題中的HTML –

綁定選擇框中的選定項不會粘住

回答

相關問題