下拉列表显示[对象对象]而不是使用敲除的值

我正在使用敲除尝试将数据绑定到下拉列表中，但由于某些原因，我只能看到[对象] [对象]而不是我想要的实际值显示并不确定我会做错什么。这是我到目前为止有：下拉列表显示[对象对象]而不是使用敲除的值

self.views = ko.observableArray(); 
self.selectedView = ko.observable(); 

if (views){ 
    for(viewOption = 0; viewOption < views.length; viewOption++){ 
      self.views.push( 
        new viewModel(views[viewOption]) 
      ); 
     } 
    }

//采样数据

var sampleData = { 
      viewers: [ 
       ..... 
      ], 
      views: [ 
       { 
        vValue: 'View 1' 
       }, 
       { 
        vValue: 'View 2' 
       } 
      ] 
     };

// HTML

<select data-bind="options: views, value: selectedView"></select>

当我运行此我得到一个下拉菜单显示的选项为正确的数目但不是显示视图1和视图2，而是显示[object] [object]两次。

来源

2015-08-15 072et

当您使用数组对象，你应该使用选项标签optionsText和期权价值optionsValue。

var vm = { 
 
    myItems: [ 
 
    { vValue: 'View 1', id: 1}, 
 
    { vValue: 'View 3', id: 3}, 
 
    { vValue: 'View 4', id: 4} 
 
    ], 
 
    selected: ko.observable() 
 
}; 
 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind=" 
 
    options: myItems, 
 
    optionsText: 'vValue', 
 
    optionsValue: 'id', 
 
    value:selected" > 
 
</select> 
 
<br/> 
 
Selected: <label data-bind="text: selected"></label>

来源

2015-08-15 01:18:53

既然你提供复杂类型的数组到options结合，剔除不知道你想为你的选择项的“文本”（即使您使用的值只有一个名称/值对）。在大多数现实场景中，您将不仅仅是复杂类型数组中的文本值。

您可以使用optionsText结合指示淘汰赛在名称/值对vValue使用你的价值，像这样：

<select data-bind="options: views, value: selectedView, optionsText: 'vValue'"> 
</select>

另一种方式来处理，这是在创建views阵列您视图模型只是一个字符串数组，然后Knockout知道数组中的单个字符串值是用作选项文本值的值。

UPDATE

您可以只创建一个字符串的JavaScript数组，像这样：

self.views = ["View1", "View2"];

然后你就可以保持你的options绑定语法一样的，因为你不必绑定Knockout中的可观察数组，您可以将其绑定到纯粹的JavaScript数组。

注 - 通常人们有一个observableArray，因为他们的数据是动态的（无论是通过从服务器或用户交互加载），但没有规则约束的对象必须是“可观察的”;尽管如果绑定到不可观察对象，您将不会获得像文本输入那样的双向绑定。

来源

2015-08-15 01:48:38

感谢您的提示！但我想知道更多关于如何以另一种方式做到这一点，如果我要在视图模型中创建一个字符串数组，这将使我无需执行for循环？在我的情况下，我在下拉菜单中显示的选项只会是这两个选项，我不会从数据库或任何其他位置调用选项。 – 072et

@ 072et - 查看更新的答案。 –

下拉列表显示[对象对象]而不是使用敲除的值

回答

相关问题