绑定选择框中的选定项不会粘住

我有一个嵌套的集合...对象集合（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 –

绑定选择框中的选定项不会粘住

回答

相关问题