项目检查时，knockoutjs 创建新对象答案

【问题标题】：knockoutjs create new object when item checked项目检查时，knockoutjs 创建新对象
【发布时间】：2016-06-02 22:54:35
【问题描述】：

按照淘汰赛文档中的这个例子：

<!-- ko foreach: items -->
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
    <span data-bind="text: itemName"></span>
<!-- /ko -->

<script type="text/javascript">
    var viewModel = {
        items: ko.observableArray([
            { itemName: 'Choice 1' },
            { itemName: 'Choice 2' }
        ]),
        chosenItems: ko.observableArray()
    };
</script>

我创建了一个对象列表，当使用复选框选中这些对象时，它会被添加到新列表（选择项）中。

我想做的是让我选择的项目列表由具有一些额外属性的对象组成。例如，如果我从上面选择“选择 1”，我希望我选择的项目看起来像：

[ { itemName: 'Choice 1', itemTitle : "", somethingElse : "" }]);

我已经设法通过创建另一个 observableArray 并订阅 selectedItems 来做到这一点，然后当 selectedItems 更改时，我手动重新创建第二个数组，但我想知道是否有更简洁的方法？

【问题讨论】：

标签： knockout.js

【解决方案1】：

var viewModel = {
    items: ko.observableArray([
        { itemName: 'Choice 1' },
        { itemName: 'Choice 2' }
    ]),
    chosenItems: ko.observableArray(),

};
viewModel.chosenItems.subscribe(function(chkVals){                  
    if(chkVals && chkVals.length > 0){
        var obj = chkVals[chkVals.length-1];
        if(!obj.itemTitle || !obj.itemTitle)
        {                   
            obj.itemTitle ='abc'+chkVals.length;
            obj.somethingElse  ='def'+chkVals.length;
        }
    }
    });

【讨论】：

【解决方案2】：

您可以将整个复杂对象放入所选项目列表中。缺点是预先填充选定值的列表有点棘手。 jquery grep 在这里派上用场。

https://jsfiddle.net/4p3bsgmg/1/

    <!-- ko foreach: items -->
        <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
        <span data-bind="text: displayName"></span>
    <!-- /ko -->
    <br/><br/>
    Chosen Items: <span data-bind='text: ko.toJSON(chosenItems)'></span>



<script>
    var viewModel = {
        items: ko.observableArray([
            { id : 1, displayName: "Bob's Burgers", name : "Robert J. Burger Co." },
            { id : 2, displayName: "Late Nite Slice", name : "Pizza Inc." },
            { id : 3, displayName: "Luigie's Pizza Tower", name : "Pizza Inc." }
        ]),
        chosenItems: ko.observableArray(),
        load: function(selectedItems){
            var selectedItems = $.grep(this.items(), function(val){
                return selectedIdsFromAWebmethodCall.indexOf(val.id) >= 0;
            });
            for(var i = 0; i < selectedItems.length; i++){
                this.chosenItems.push(selectedItems[i]);
            }
        }
    };

    ko.applyBindings(viewModel);
    var selectedIdsFromAWebmethodCall = [1];
    viewModel.load(selectedIdsFromAWebmethodCall);
</script>

【讨论】：

我遇到的问题是我无法将这些额外的字段放入列表中。它们需要在选择项目时生成。