Question

我有这样的模特

function ViewModel(){
    var self = this

    self.Choices            =   ko.observableArray([])
    self.AcceptedChoices    =   ko.observableArray([])

    self.LoadData   =   function(){
        self.ViewAnswered()
    }   

    self.ViewAnswered = function(){
        var url =   'QuestionsApi/ViewAnswered'
        var type    =   'GET'
        ajax(url , null , self.OnViewAnsweredComplete, type )                   
    }
    self.OnViewAnsweredComplete = function(data){
        var currentAnswer = data.Answer

        self.Choices(currentAnswer.Choices)
        self.AcceptedChoices(currentAnswer.AcceptedChoices)
    }       

    self.LoadData()         
}

这是我的目标。我删除了额外的东西

{
    "AcceptedChoices": [94, 95],
    "Choices": [{
        "ChoiceId": 93,
        "ChoiceText": "Never"
    }, {
        "ChoiceId": 94,
        "ChoiceText": "Sometimes"
    }, {
        "ChoiceId": 95,
        "ChoiceText": "Always"
    }]
}

这是绑定

<u data-bind="foreach:Choices">
    <li>
        <input type="checkbox" name="choice[]" data-bind="value:ChoiceId,checked:$root.AcceptedChoices">
        <span data-bind="text:ChoiceText">Never</span>
    </li>
</u>

现在问题是由于选择对象数组而没有检查复选框。我该如何解决这个问题？虽然同样的东西适用于只有一个选择的无线电。

Answer 1

别介意我在这里找到了解决方案

checked binding does not properly compare primatives

它也告诉了两种方法。小提琴中提供的解决方案令人毛骨悚然，因此我将使用使用淘汰版本3.0.0的那个。

我需要做的就是附上knockout-3.0.0.js而不是其他任何内容，然后使用checkedValue代替value。

<input type="checkbox" name="choice[]" 
    data-bind="
            checkedValue:ChoiceId,
            checked:$root.AcceptedChoices"
>

这就完成了。希望它可以帮到某人。

编辑：

我注意到它无法在Chrome上运行。所以我找到了另一种选择。我创建了这两个函数。

self.ConvertToString = function(accepted){
    var AcceptedChoices =   []
    ko.utils.arrayForEach(accepted, function(item) {
        AcceptedChoices.push(item.toString())
    })  
    return  AcceptedChoices
}
self.ConvertToInteger = function(accepted){
    var AcceptedChoices =   []
    ko.utils.arrayForEach(accepted, function(item) {
        AcceptedChoices.push(parseInt(item))
    })  
    return  AcceptedChoices         
}

并使用它们

self.AcceptedChoices(self.ConvertToString(currentAnswer.AcceptedChoices))

获取值

AcceptedChoices: self.ConvertToInteger(self.AcceptedChoices()),

Answer 2

您需要检查选择的ID是否在AcceptedChoices数组中。使用ko.utils数组函数来帮助实现：

checked: function() { return ko.utils.arrayFirst($root.acceptedChoices(), function(item){
    return item == ChoiceId();
} !== null }

您可以将其放入根对象的函数中：

self.isChoiceAccepted = function(choiceId){
    return ko.utils.arrayFirst($root.acceptedChoices(), function(item){
        return item == choiceId;
    } !== null
};

然后在data-bind中将其称为：

checked: function() { return $root.isChoiceAccepted(ChoiceId()); }

这没有经过测试，我不是100％确定如果arrayFirst方法在数组中找不到匹配项，则返回null，所以chack that。

在加载时检查来自对象数组的复选框

2 个答案: