Knockout Js - привязка отдельного элемента из массива json к элементу - PullRequest
Новая
       17

Knockout Js - привязка отдельного элемента из массива json к элементу

9 голосов
/ 02 февраля 2012

У меня есть следующая модель представления, которая содержит массив элементов 

   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 является атрибутом data-id входа. 

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

В этом примере я бы связал элемент массива с id = 1, и текст выглядел бы как «Стандартный (сэндвич)», но мне все еще нужно полное отслеживание привязки и изменений (наблюдаемые) и все другие хорошие вещи в Нокаут.

Как подобрать идентификатор данных и использовать его в коде привязки для привязки соответствующего блюда к входу?

Заранее спасибо

1 Ответ

16 голосов
/ 02 февраля 2012

Предлагаемое решение: 

   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>
...