2

我正在使用knockoutjs我有一个下拉列表。我的下拉列表对应于一个名为 (booleanValue) 的布尔可观察变量，具体取决于用户选择 (true, false)。该功能正常工作，但我想更改下拉列表文本。例如，我希望它是 All，而不是 true，而对于 false，我希望是 none。到目前为止，这是我的代码：

html 选择标签：

<select data-bind="options: availableOptioons, selectedOptions: booleanValue, value :booleanValue"></select>

我的视图模型

  function ViewModel(model) {
        this.booleanValue= ko.observable(model.BooleanValueComingFromServer);
        this.availableOptioons = ko.observableArray([true,false]);
    };

我还根据 booleanValue 隐藏和显示一些 html：

<table class="form" style="width: 100%">
  <tbody>
            <tr data-bind="visible: booleanValue">
                <td>Team</td>
                <td>Score</td>
            </tr>
            <tr data-bind="visible: !$root.booleanValue()">
                <td>Student</td>
                <td>Grade</td>
            </tr>
   </tbody>
 </table>

正如我之前提到的，更改下拉列表选择的值将UI正确更改。我只是想改变 true --> all，false --> none。

任何想法我怎么能做到这一点？

谢谢。

4

2 回答 2

3

Knokcout 为此提供了 optionsText 绑定：

<select data-bind="options: availableOptioons, optionsText: 'text', optionsValue: 'id', value :booleanValue"></select>

并修改 availableOptionons 数组：

  this.availableOptioons = ko.observableArray([{
      text: "All",
      id: true
  }, {
      text: "None",
      id: false
  }]);

这是工作小提琴：http: //jsfiddle.net/D3aMj/

于 2013-11-13T11:03:44.833 回答
1

optionsText是您需要的，请查看文档： http: //knockoutjs.com/documentation/options-binding.html。

如果使用optionsText，请注意 observableArray 中的值将是对象，而不再只是真/假。这将涉及一些额外的工作来获取实际的真/假值并将当前选择的选项与来自服务器的选项相匹配。

示例：http: //jsfiddle.net/CYVf5/2/

html:

<select data-bind="options: availableOptions, optionsText: 'label', value :booleanValue"></select>
<br />
actualValue: <span data-bind="text:actualValue"></span>

js：

  function ViewModel() {
        this.availableOptions = ko.observableArray([
            {
                label:'All',
                value:true
            },
            {
                label:'none',
                value:false
            }
            ]);      

        this.booleanValue= ko.observable(this.availableOptions()[0]);  
      this.actualValue = ko.computed(function(){
          return this.booleanValue().value;
      },this);      
    };

var vm = new ViewModel();
ko.applyBindings(vm);
于 2013-11-13T11:01:08.443 回答