Knockout.js Jak uzyskać dostęp do właściwości obiektu na wewnętrznej-danych wiążą

Question

mam super prosty kod nokaut poniżej:

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> 

Zasadniczo mam przeszedł cały obiekt danych rzeczowe obserwowalnym dataTest. Uznałbym, że łatwo jest uzyskać dostęp do właściwości obiektu wewnętrznego z notacją kropkową. Ale nie jest.

Czy ktoś mógłby pomóc, aby powyższy kod zadziałał?

Answer 1

Jest obecnie zaobserwować (czyli jest to funkcja). Musisz zadzwonić do tej funkcji.

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

Editing Akshat's fiddle to match.

Nie wiadomo, dlaczego jest to przewaga nad zagnieżdżeniem odpowiedniej hierarchii. To, o co prosi OP, to dość anty-wzór. Sądzę, że warto przejrzeć ponad the page on binding context Akshat suggests, aby zobaczyć, jak utworzyć obiekt dataTest jako obiekt nadrzędny, a następnie przejść do znaczników.

Answer 2

Zapoznaj się z fiddle .Wszystkie trzeba zrobić to

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

Ten element będzie zapełnić zakresowego ceny sprzedaży określonej w modelu widoku.

Z twojego pytania wydaje mi się, że to, co próbujesz zrobić, wiąże model widoku z różnymi elementami strony html. Aby to osiągnąć, można przekazać parametr id do powiązania stosowanego w celu powiązania określonego modelu widoku z określoną sekcją strony. Podoba Ci się to

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

Jeśli szukasz bezpośredni dostęp model widok użyć binding context. W tym przypadku potrzebne są $data wiążące context.So wiązanie w rozpiętości zmieni się

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

Answer 3

Jeśli strona jest tylko do odczytu, a model widoku nie ulegnie zmianie (tak jak w moim przypadku), nie jest konieczne obserwowanie.

Można także prace przykładowy kod w ten sposób:

var viewModel={ 
    dataTest: data 
}; 

Następnie można uzyskać dostęp do właściwości w wiązaniu z prostego zapisu danych dot.

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

Korzystanie z kontekstu lub with wiązania nie jest pożądane, ponieważ w moim przypadku musiałbym ciągle przełączać się między 2 obiektów w tabeli porównawczej.

Answer 4

Wezwanie do ko.observable musi być przeniesiona z MVVM do elementu 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>