Knockout Js-将json数组中的单个项绑定到元素

Knockout Js - Binding a single item from a json array to an element

本文关键字：单个项 绑定 元素 Js- json 数组 Knockout      更新时间：2023-09-26

我有下面的视图模型，它包含一个元素数组

   function ReservationsViewModel() {
        var self = this;

        self.availableMeals = [
            { mealName: "Standard (sandwich)", price: 0, id = 1 },
            { mealName: "Premium (lobster)", price: 34.95, id = 2 },
            { mealName: "Ultimate (whole zebra)", price: 290, id = 3 }
        ];  
  }

我想将这个视图模型绑定到一个输入，但我只想绑定具有id值作为输入的数据id属性的单个数组元素餐名。

<input type="text" id="firstElementMealName" data-id="1" data-bind="value: ??"></input>

在这个例子中，我将绑定id＝1的数组元素，文本将显示为"Standard（Sandwich）"，但我仍然需要完整的绑定和更改跟踪（observables）以及Knockout中的所有其他好东西。

如何获取数据id并在绑定代码中使用它来将适当的膳食绑定到输入？

提前感谢

建议的解决方案：

   function ReservationsViewModel() {
        var self = this;

        self.availableMeals = ko.observableArray([
            { mealName: "Standard (sandwich)", price: 0, id = 1 },
            { mealName: "Premium (lobster)", price: 34.95, id = 2 },
            { mealName: "Ultimate (whole zebra)", price: 290, id = 3 }
        ]);
        self.getMealById = function(id) {
            ko.utils.filterArray(self.availableMeals(), function(item) {
                return item.id == id;
            });
        };
  }

视图中：

<input type="text" id="firstElementMealName" data-bind="value: getMealById(1)"></input>

编辑：这是一个双向解决方案：

function ReservationsViewModel() {
        var self = this;

    self.availableMeals = ko.observable({            
        id_1: { mealName: "Standard (sandwich)", price: ko.observable(0) },
        id_2: { mealName: "Premium (lobster)", price: ko.observable(34.95) },
        id_3: { mealName: "Ultimate (whole zebra)", price: ko.observable(290) }
        });
  }
ko.applyBindings(new ReservationsViewModel());

视图中：

<input type="text" id="firstElementMealName" data-bind="value: availableMeals().id_2.price()"></input>
相关文章：