Knockout.js как получить доступ к свойству внутреннего объекта в привязке данных

У меня есть супер простой код нокаута ниже:

var data ={
    "Id" : 1001,
    "SalePrice" : 12345,
    "ListPrice" : 333,
    "ShortDesc" : "Tayler 12345E",
    "Description" : " Long Description"
};


var viewModel={
    dataTest: ko.observable(data)
};


ko.applyBindings(viewModel);

<span data-bind="text: dataTest.SalePrice"></span>

В принципе, я передал весь объект данных наблюдаемому объекту dataTest. Я бы счел достаточно простым доступ к свойству внутреннего объекта с точечной нотацией. Но не.

Помогло ли кто-нибудь помочь, как сделать выше код работать?

Ответ 1

Теперь это наблюдаемое (т.е. это функция). Вам нужно вызвать функцию.

<span data-bind="text: dataTest().SalePrice"></span>

Редактирование скрипта Akshat для соответствия.

Не уверен, почему это преимущество перед вложением правильной иерархии. То, что спрашивает OP, довольно анти-шаблон. Я думаю, вы можете захотеть просмотреть страницу в контексте привязки Akshat предлагает, чтобы увидеть, как создать dataTest в качестве родительского объекта, а затем сверлить вниз в вашей разметке.

Ответ 2

Посмотрите fiddle. Все, что вам нужно сделать, это

<span data-bind="text: salePrice "></span>

Это заполнит элемент span ценой продажи, определенной в модели представления.

Из вашего вопроса мне кажется, что то, что вы пытаетесь сделать, - это привязать модель представления к различным элементам html-страницы. Для этого вы можете передать параметр id для привязки привязки для привязки определенной модели представления к определенному разделу страницы. Как этот

ko.applyBindings(viewmodel,document.getElementById('id'));

Если вы ищете прямой доступ к модели представления, используйте контекст привязки . В этом случае вам понадобится контекст привязки $data. Таким образом, привязка в диапазоне изменится на

<span data-bind="text:$data.salePrice"></span>

Ответ 3

Если страница только для чтения, и модель представления не изменится (как в моем случае), вам не потребуется наблюдаемое.

Вы также можете сделать пример кода, выполнив следующие действия:

var viewModel={
    dataTest: data
};

Затем вы можете получить доступ к своим свойствам в привязке данных с помощью простой точечной нотации.

<span data-bind="text: dataTest.SalePrice"></span>

Использование контекста или with привязка была нежелательна в моем случае, так как мне пришлось бы постоянно переключаться назад и вперед между двумя объектами в таблице сравнения.

Ответ 4

Вызов для ko.observable необходимо перенести из MVVM в HTML-элемент:

    var data ={
    "Id" : 1001,
    "SalePrice" : 12345,
    "ListPrice" : 333,
    "ShortDesc" : "Tayler 12345E",
    "Description" : " Long Description"
};


var viewModel={
    dataTest: data
};


ko.applyBindings(viewModel);

<span data-bind="text: ko.observable(dataTest.SalePrice)"></span>