Question

我有一个ko.js应用程序，我偶然发现了一些麻烦。通过检查绑定可以很容易地观察所选无线电的值，但是如何获得以下元素的文本？这就是我所说的。

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

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

<p>you have selected hamburger</p>

但是使用ko.js似乎只能获得无线电的价值，但显示你选择“323”的消息并不是我需要的。我认为jquery可以提供帮助，但我听说不建议使用带有ko.js的jquery事件监听器。

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

var viewModel = function(){

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

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

你可以帮帮我吗？

Answer 1

您需要添加一些内容来保存视图模型中的选定值。然后调用我添加的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>

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

1 个答案: