如何在knockout中绑定到可观察数组中的项目？

我有以下可观察到的数组：如何在knockout中绑定到可观察数组中的项目？

self.Profiles =ko.observableArray(ko.utils.arrayMap(initialData, function (profile) { 
       return { 
        StartDate : formatDateOnly(profile.StartDate), 
        EndDate : formatDateOnly(profile.EndDate), 
        ProfileID :profile.ID, 
        ProfileName : profile.Name, 
        ProjectName : profile.ProjectName, 
        ReadingListID : profile.ReadingListID, 
        ReadingListName : profile.ReadingListName 

       }; 
      }));

我要绑定一个下拉列表配置文件，以显示配置文件名称，如果下拉变化的值，那么我想更新与新的相应的span元素值添加到选定的profileID。

<table id="readingListApplyToProfile" class="fullWidthTable"> 
     <tr> 
      <td> 
       Profile: 
      </td> 
      <td> 
       <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID'"></select> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       End Date: 
      </td> 
      <td> 
       <span data-bind="'text':EndDate"></span> 
      </td> 
     </tr> 
    </table>

因为span元素不知道下拉值，所以任何人都可以帮助我。我完全迷失了。

来源

2013-03-20 Xerxes

也许它会工作到选择的值绑定到computedObservable是发生在一个简档，并输出正确的配置文件的摘要名称，然后跨越文本结合相同computedObservable – jonhopkins 2013-03-20 13:01:01

，可能会工作，但我不想做所有的属性相同的代码，林希望有人能给我一个更好的解决方案。谢谢 – Xerxes 2013-03-20 13:02:38

有道理。这是一个完整的猜测，因为我不擅长computedObservables，但是可以输出整个Profile对象，并绑定到跨度上的特定属性？像'data-bind =“text：getProfile.ProfileName”'或类似的东西？ – jonhopkins 2013-03-20 13:11:37

你缺少的是下拉列表中的值绑定。这是我创建的小提琴。

http://jsfiddle.net/sujesharukil/sBZvb/1/

<select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: selectedProfileId ">

这里是视图模型

var myViewModel = function() 
{ 
    var self = this; 
     this.Profiles =ko.observableArray([{ 
        StartDate : '02/01/2012', 
        EndDate : '01/01/2013', 
        ProfileID :10, 
        ProfileName : 'Some Name', 
        ProjectName : 'Some Project', 
        ReadingListID : 100, 
        ReadingListName : 'Some List', 
       }, 
       { 
        StartDate : '12/01/2012', 
        EndDate : '02/27/2013', 
        ProfileID :12, 
        ProfileName : 'New Name', 
        ProjectName : 'New Project', 
        ReadingListID : 200, 
       }]); 
    this.selectedProfileId = ko.observable({}); //this stores the selected id 

} 

ko.applyBindings(new myViewModel());

希望有所帮助。

SUJ

来源

2013-03-20 13:30:15

我有一个computedObservable，取入一个简档，并输出对应于该ID，然后结合跨度于输出的对象的各种属性的资料的想法。令人惊讶的是，它的工作。我正在用Sujesh Arukil的小提琴搞乱我的想法，所以模型非常相似。

工作示例显示多个跨度：http://jsfiddle.net/jonhopkins/fgZNQ/2/

的型号：

var myViewModel = function() 
{ 
    var self = this; 
     self.Profiles =ko.observableArray([{ 
        StartDate : '02/01/2012', 
        EndDate : '01/01/2013', 
        ProfileID :10, 
        ProfileName : 'Some Name', 
        ProjectName : 'Some Project', 
        ReadingListID : 100, 
        ReadingListName : 'Some List', 
       }, 
       { 
        StartDate : '12/01/2012', 
        EndDate : '02/27/2013', 
        ProfileID :12, 
        ProfileName : 'New Name', 
        ProjectName : 'New Project', 
        ReadingListID : 200, 
       }]); 

    self.selectedProfileId = ko.observable(); 

    self.getProfile = ko.computed({ 
     read: function() { 
      for (var i = 0; i < self.Profiles().length; i++) { 
       if (self.Profiles()[i].ProfileID == self.selectedProfileId()) { 
        return self.Profiles()[i]; 
       } 
      } 
      // in case there was no match, output a blank Profile 
      return [{ 
        StartDate : '', 
        EndDate : '', 
        ProfileID : '', 
        ProfileName : '', 
        ProjectName : '', 
        ReadingListID : '', 
        ReadingListName : '' 
      }]; 
     }, 
     write: function(value) { 
      self.selectedProfileId(value); 
     }, 
     owner: self 
    }); 
} 

ko.applyBindings(new myViewModel());

编辑： Sujesh提出一个更好的版本computedObservable的。

self.getProfile = ko.computed(function(){ 
    var profile = ko.utils.arrayFirst(self.Profiles(), function(prof){ 
     return prof.ProfileID == self.selectedProfileId(); 
    }); 

    return profile || {}; 
});

的HTML：

<table id="readingListApplyToProfile" class="fullWidthTable"> 
    <tr> 
     <td> 
      Profile: 
     </td> 
     <td> 
      <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: getProfile "></select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      End Date: 
     </td> 
     <td> 
      <span data-bind="text: getProfile().ProfileName"></span> 
     </td> 
    </tr> 
</table>

来源

2013-03-20 13:55:58 jonhopkins

如何在knockout中绑定到可观察数组中的项目？

回答

相关问题