0

我有一个 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 似乎只能获取 radio 的值，但是显示您选择“323”的消息并不是我需要的。我认为 jquery 可以提供帮助，但我听说不建议使用带有 ko.js 的 jquery 事件侦听器。

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

var viewModel = function(){

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

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

你能帮我吗？

4

1 回答 1

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>
于 2013-09-09T19:05:22.593 回答