如何使用唯一数据填充选择选项并将值作为选定项返回?

时间:2015-11-28 08:43:42

标签: javascript knockout.js knockout-2.0

我有一个传递给observableArray的数据对象,如下所示:

self.Players = ko.observableArray([{

    "LastName": "Jordan",
        "FirstName": "Michael",
        "Team": "Chicago Bulls",
        "Jersey": "23"
}, {
    "LastName": "Duncan",
        "FirstName": "Tim",
        "Team": "San-Antonio Spurs",
        "Jersey": "21"
}, {
    "LastName": "Duncan",
        "FirstName": "Tim",
        "Team": "San-Antonio Spurs",
        "Jersey": "21"
}, {
    "LastName": "Jordan",
        "FirstName": "Michael",
        "Team": "Chicago Bulls",
        "Jersey": "23"
}
    ]);

我需要使用唯一每个播放器的名字和姓氏填充Select Options,同时将泽西值作为选定值传递。数据可能有重复。

因此,每次选择一名球员时,我都需要将球衣号码传递给:

self.SelectedPlayer = ko.observable('');

我试图做这样的事情:

self.UniquePlayers = ko.computed(function () {
       var uniquePlayers = ko.utils.arrayMap(self.Players(),

           function (data) {
               return data.FirstName + ' ' + data.LastName
           });

       return ko.utils.arrayGetDistinctValues(uniquePlayers).sort();
   });

这是有效的,但我没有得到泽西岛,因为它没有被退回。

我也试过返回数据对象:

           function (data) {
               return data
           });

这允许我指定optionsValueoptionsText

  <select class="form-control" 
  data-bind="options: UniquePlayers,
             optionsText: function(item){return item.FirstName + ' ' + item.LastName},
             optionsValue: 'Jersey',
  value: SelectedPlayer"></select>

但我没有获得独特的价值观,而且我无法访问optionsValue

self.SelectedPlayer().Jersey;

我如何显示独特的球员名字和姓名,并将球衣作为optionsValue?

2 个答案:

答案 0 :(得分:0)

在viewmodel中编写匿名函数不是最好的主意,我认为你的代码太复杂了,我认为在这种情况下你真的不需要<?php /* quizer.php */ if( $_SERVER['REQUEST_METHOD']=='POST' ){ /* select correct answers from db */ $sql='select * from `quiz`'; $res=mysql_query( $sql, $con ); /* store answers in an array for marking */ $answers=array(); $score=0; $index=0; /* populate the answers array */ while( $rs=mysql_fetch_object( $res ) ){ $answers[]=$rs->correct_answer; } /* mark the answers */ foreach( $_POST as $question => $answer ){ echo $question.' '.$answer; if( $answer === $answers[ $index ] ) $score++; $index++; } /* update the db */ $sql="update `user` set `score`=$score where `username`='$username';"; /* etc */ } ?> <form action="quizer.php" method="post"> <!-- assume select menus for questions and possible answers --> <label for='q1'>what is your name? <select name='q1'> <option value="a">rolex</option> <option value="b">wales</option> <option value="c">israel</option> <option value="d">ade</option> </select> </label> <br /> <label for='q2'>is nigeria a country? <select name='q2'> <option value="a">no</option> <option value="b">yes</option> </select> </label> <br /> <input type="submit" value='Submit Quiz'> </form> ,无论如何,你为什么不去对于类似的事情:

ko.computed

如果你要创建一个jsfiddle演示,它会更容易玩。

答案 1 :(得分:0)

您不能将ko.utils.arrayGetDistinctValues()用于包含对象的数组。此函数仅适用于原始值,另一方面,对象可以具有相同的属性,而不是它们本身相同。

使用类似的东西:

self.UniquePlayers = ko.computed(function () {
    var uniquePlayers = [], index = {};

    ko.utils.arrayForEach(self.Players(), function (p) {
        var fullName = p.FirstName + ' ' + p.LastName;
        if ( !(fullName in index) ) {
            uniquePlayers.push({text: fullName, player: p});
            index[fullName] = true;
        }
    });

    return uniquePlayers.sort();
});

<select class="form-control" data-bind="
    options: UniquePlayers,
    optionsText: 'fullName',
    optionsValue: 'player',
    value: SelectedPlayer
"></select>

当然,在viewmodel init期间预先计算fullName值并将其存储在播放器对象中是明智的。