在data-bind上用两个值填充网格

Question

好的，所以我有一个网格，有两个字段，我想从两个下拉列表添加选定的值，但我无法让他们两个添加在相同的值上，我只得到一个值或者它添加一行但是显示没有价值

这是使用一个属性时代码的外观

<div id="gameSelectionForm">
<div class="col-sm-12 no-pad-sides">
    <div class="col-sm-12">
        <label>@Resources.GetString("common.games"):</label>
    </div>
    <div class="row no-pad-sides">
        <div class="col-sm-4">
            <select id="games" data-role="dropdownlist" data-bind="source: allGames, value: selectedGame"
                    data-text-field="Name" data-value-field="GameId" data-option-label="Select Games"></select>
        </div>
        <div class="col-sm-3">
            <select id="rtp" data-role="dropdownlist" data-bind="source: allRtpLevels, value: selectedRtpLevel"
                    data-text-field="Level" data-value-field="RtpLevelId" data-option-label="Select RTP Level"></select>
        </div>
        <div class="col-sm-2 no-pad-left">
            <button type="button" id="AddGameBtn" data-bind="click: addGame" class="blue-button k-primary k-button button-level-height max-width">
                <span class="fa fa-plus-circle"></span>&nbsp;@Resources.GetString("common.add")
            </button>
        </div>
    </div>
    <div class="col-sm-12">
        <div id="gamesGrid" data-role="grid"
             data-sortable="true"
             data-editable="{update: false, destroy: true, confirmation: false}"
             data-columns='[{"field": "Name", "title": "@Resources.GetString("common.name")"},{"field": "Level", "title": "@Resources.GetString("common.rtplevel")"},
                            {"command": "destroy", width: 150}] '
             data-bind="source: selectedGames"
             data-scrollable="true">
        </div>
    </div>
</div>

和逻辑

var gameSelectionViewModel = kendo.observable({
        allGames: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.GamesList)),
            schema: {
                model: {
                    id: "GameId",
                    fields: {
                        GameId: { type: "number" },
                        Name: { type: "string" }
                    }
                }
            }
        }),
        selectedRtpLevel: "",
        selectedGame: "",
        selectedGames: '@(Model.SelectedGames != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedGames)) : new kendo.data.DataSource(),
        selectedRtpLevels: '@(Model.SelectedRtpLevel != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedRtpLevel)) : new kendo.data.DataSource(),
        addGame: function () {
            if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;

            var selectedRtpLevel = gameSelectionViewModel.allRtpLevels.get(gameSelectionViewModel.selectedRtpLevel);
            var selectedRtpLevels = gameSelectionViewModel.selectedRtpLevels.data();
            var selectedGames = gameSelectionViewModel.selectedGames.data();
            var selectedGame = gameSelectionViewModel.allGames.get(gameSelectionViewModel.selectedGame);

            if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
                selectedGames.push(selectedGame)
            } else {
                warnBox('Game already exists!');
            }
        },
        allRtpLevels: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.RtpConfigurations)),
            schema: {
                model: {
                    id: "RtpLevelId",
                    fields: {
                        RtpLevelId: { type: "number" },
                        Level: { type: "string" }
                    }
                }
            }
        })
    });

    // Attach view model to html
    kendo.bind($("#gameSelectionForm"), gameSelectionViewModel);

这条线是它添加的

if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
            selectedGames.push(selectedGame)

我已经尝试了两种推送的所有解决方案但是它给出了不同行的值。我是新手使用剑道，并没有完全围绕如何使用它。当我调用addGame函数时，如何将selectedRtpLevel和selectedGame都显示在网格中？

Answer 1

这是我准备的道场。

http://dojo.telerik.com/oJofAgoD

这里的主要内容是您如何比较并将游戏添加到数据源中。

我通过用以下代码替换你的addGame函数来简化了这个过程：

if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;


          var newgame = {Name:gameSelectionViewModel.get("selectedGame"), Level:gameSelectionViewModel.get("selectedRtpLevel")}; 

          var filteredList = gameSelectionViewModel.get("selectedGames").data().filter(function(item){
            return item.Level === newgame.Level &&  item.Name === newgame.Name;
          }); 

          console.log(filteredList); 

          if(newgame && (filteredList === undefined || filteredList.length === 0))
          {
             gameSelectionViewModel.selectedGames.add(newgame); 
          }
          else 
          {
            alert('game already added'); 
          }

这里最重要的是你正在构建位于数据源中的对象而不是网格中显示的对象。所以我通常喜欢有一个函数来获取一个默认对象，或者允许我构造一个可以插入到具有正确属性集的数据源的对象。

然后确定新构造的游戏是否在我刚刚过滤的集合中，我们希望看到过滤后的列表未定义或长度为零。除此以外的任何东西，我们知道我们已经在集合中有该项目，所以不要添加它。