web-dev-qa-db-fra.com

Knockout.js comment accéder à la propriété d'objet interne sur data-bind

J'ai un code knockout super simple ci-dessous:

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>

Fondamentalement, j'ai passé tout l'objet de données à la propriété observable dataTest. J'aurais pensé qu'il était assez facile d'accéder à la propriété d'objet interne avec la notation par points. Mais n'est pas.

Quelqu'un pourrait-il aider s'il vous plaît comment faire pour que le code ci-dessus fonctionne?

knockout.js
20
Nil Pun

C'est une observable maintenant (c.-à-d., C'est une fonction). Vous devez appeler la fonction.

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

Modification du violon d'Akshat pour correspondre .

Vous ne savez pas pourquoi c'est un avantage par rapport à l'imbrication d'une hiérarchie appropriée. Ce que le PO demande, c'est plutôt anti-modèle. Je pense que vous voudrez peut-être examiner la page sur le contexte de liaison suggéré par Akshat pour voir comment créer la variable dataTest en tant qu'objet parent et explorer ensuite dans votre balisage.

31
ruffin

Découvrez le fiddle . Tout ce que vous avez à faire est le suivant:

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

Cela remplira l'élément span avec le prix de vente défini dans le modèle de vue.

D'après votre question, il me semble que vous essayez de lier le modèle de vue à différents éléments de la page html. Pour ce faire, vous pouvez transmettre un paramètre id aux liaisons d’application afin de lier un modèle de vue spécifique à une section spécifique de la page. Comme ça

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

Si vous souhaitez accéder directement au modèle de vue, utilisez le contexte binding . Dans ce cas, vous avez besoin du contexte de liaison $data. Ainsi, la liaison dans span passera à

<span data-bind="text:$data.salePrice"></span>
2
Akshat Jiwan Sharma

Cela peut être aussi écrit comme:

<span data-bind="text: dataTest()['SalePrice']"></span>
1
Harpreet Singh Saini

L'appel à ko.observable doit être déplacé de MVVM vers un élément 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>
0
user6428443

Si la page est en lecture seule et que le modèle d'affichage ne changera pas (comme dans mon cas), vous n'avez pas besoin de l'observable.

Vous pouvez également faire fonctionner l'exemple de code en procédant comme suit:

var viewModel={
    dataTest: data
};

Ensuite, vous pouvez accéder à vos propriétés dans la liaison de données avec une simple notation par points.

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

L'utilisation d'un contexte ou d'une liaison avec n'était pas souhaitable dans mon cas car je devais basculer continuellement entre 2 objets dans un tableau de comparaison.

0
Jess