기존 DOM 요소를 KnockoutJS에 바인딩하는 방법 viewModel

Question

JS 값이 변경되면 KnockoutJS를 사용하여 DOM을 업데이트합니다 (Knockout이이 기능을 제공함).

녹아웃의 ViewModel는 다음 블록과 같이 보이는 기본 : 가격 변경, 뷰가 자동으로 녹아웃에 의해 업데이트 될 때 이제

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

:

자바 스크립트 :

var viewModel = { 
    price: ko.observable(109) 
} 

HTML을 .. 하지만 내가 갖고 싶은 것은 다음과 같습니다 :

var viewModel = { 
    price: ko.observable(jQuery("#price")) 
} 

<span id="price">99.00</span> 

그래서 DOM 요소를 내 viewModel에 바인딩하고 싶습니다. 모델의 가격 속성은 값 99.00으로 초기화됩니다. 가격이 (자바 스크립트에서) 변경되면 #price의 DOM 값도 업데이트해야합니다.

나는 당신에게 질문이 분명하기를 바랍니다.

시간 내 주셔서 감사합니다. 이 매번 업데이트됩니다 종속 관찰

var viewModel = { 
    price: ko.observable(109) 
} 

viewModel.priceElement= ko.dependantObservable(function(){ 
    viewModel.price(); 
    return jQuery("#price"); 
}) 

사용

Answer 1

로보기 모델은 초기화되어야한다. 그래서 대신 :

jQuery("#price").text('some new value'); 

.. 당신은

viewModel.price('some new value'); 

이러한 접근 방식은 더 MVVM 패턴을 유지에있을 것입니다 ... 작성해야합니다.

Answer 2

봅니다 당신은 가격을 변경합니다. 당신이 모델이 아닌보기를 업데이트하기 위해 자바 스크립트를 사용한다 그 후

var viewModel = { 
    price: ko.observable(jQuery("#price").text()) 
} 

<span id="price" data-bind="text: price">99.00</span> 

을 다음과 같이