igCombo in durandal bind the selectedItems

Question

我在 Durandal 项目中的 html 页面中有一个基础设施 Ignite UI 组合。我希望它的 selectedItem 属性绑定到后面的 JavaScript 中的任何变量。我该怎么做？谢谢。

Answer 1

看看这个例子：Bind Combo with KnockoutJS(Durandal 使用 Knockout，所以你应该能够获取此示例的大部分代码并重用(。

基本上，在您的视图模型中，您将需要一个额外的可观察量来保存当前选择，在此示例中，它是定义为"actorName"：

function ViewModel(actorsList) {
    var self = this;
    this.actorsList = actorsList;
    this.actors = ko.observableArray(self.actorsList);
    //  The name of the currently selected customer.
    this.actorName = ko.observable(self.actors()[0].name);
}

(我已经编辑了一些，因为该示例具有第二个用于修改组合的选择元素(

然后在视图中的组合中，您希望将此额外的可观察量绑定到"text"属性，如示例中所示：

<span id="comboActors" data-bind="igCombo: { 
    text: actorName,
    dataSource: actors,
    textKey: 'name',
    valueKey: 'id',
    allowCustomValue : true,
    enableSelectionChangedUpdate: true,
    width: '200',
    mode: 'dropdown',
    enableClearButton: false
}"></span>

请注意，name 是你传递给视图模型的可观察值，并且相同的"name"属性被定义为文本键，这就是为什么组合会在您设置文本时实际选择正确的项。现在您需要做的就是修改值，例如：

viewModel.actorName("Jeremy Irons");

组合将更改选择(您甚至可以使用控制台中的代码对示例进行尝试(。这是基础知识，有一个关于配置挖空支持 (igCombo( 挖空/杜兰达尔文档的帮助主题，供您查看，以防您无法在项目中安装此实现。