获取无线电的文本值，而不是使用ko.js中的实际值

Getting text value of radio instead with the actual value in ko.js

本文关键字：ko js 文本 无线电 获取      更新时间：2023-09-26

我有一个ko.js应用程序，我偶然发现了一些麻烦。通过选中绑定使所选无线电的值可观察很简单，但是如何获取以下元素的文本呢？这就是我要说的。

<input type="radio" value="323" data-bind="checked: foodId">
<span data-bind="text:foodName"></span>

所以我需要从跨度中获取条目的名称，而不是它的实际 ID。这是用户做出选择后最终需要的内容。

<p>you have selected hamburger</p>

但是使用 ko.js似乎只能获得无线电的值，但显示您选择"323"的消息不是我需要的。我认为 jquery 可能会有所帮助，但我听说不建议将 jquery 事件侦听器与 ko.js 一起使用。

编辑：数据看起来像这样，

var viewModel = function(){
    this.food = ko.observableArray([{foodId: 323, foodName:'hamburger'},
                                    {foodId: 339, foodName:'pizza'}]
}

在 HTML 中，我使用 foreach 绑定来显示所有条目。很抱歉我无法复制完整的代码，我在移动设备上，目前没有来源。

你能帮我吗？

您需要添加一些内容来保存视图模型中的选定值。然后调用类似于我添加的 selectedFoodName 函数的函数，以获取当前所选食物的名称。

// untested but should help you get the idea
var viewModel = function() {
    var self = this;
    self.selectedFoodId = ko.observable();
    self.food = ko.observableArray([{foodId: 323, foodName:'hamburger'},
                                {foodId: 339, foodName:'pizza'}]);
    self.selectedFoodName = ko.computed(function() {
        var food = self.food();
        var selectedFoodId = self.selectedFoodId();
        for (var i = 0, len = food.length; i < len; i++) {
            if (food[i].foodId === selectedFoodId) {
                return food[i].foodName;
            }
        }
        return "None";
    }, self);
};

然后在您的 html 中：

<div data-bind="foreach: food">
    <input type="radio" data-bind="value: foodId, checked: selectedFoodId" />
    <span data-bind="text: foodName"></span>
</div>
<div>Your selected food is: <span data-bind="text: selectedFoodName"></span></div>
相关文章：