자바 스크립트에서 녹아웃 뷰 모델 채우기

Question

나는 많은 javascript/jquery 코드를 knockoutjs로 대체하는 중이므로 최선의 방법을 찾으려고합니다. 나는 같은 시간에 모든 것을 교체 할 시간이 없기 때문에 기존의 자바 스크립트와 녹아웃 로직을 통합해야 할 것이다 ...

데이터에서 호출되지 않는 자바 스크립트에서 녹아웃 뷰 모델을 채울 수있는 방법이 있는가? 바인드 속성? 내가 도움이되지 않았기 때문에 도움이 될 것입니다. 적어도 다른 곳에서는 찾을 수 없었습니다.

여기서 내가 언급 한 것은 일을하는 "올바른"방법이 아니라는 것을 알고 있지만 자바 스크립트 코드의 일부를 마이그레이션하려고합니다 ... 한 번에 모든 것을 수행하는 것은 옵션이 아닙니다. 그 순간.

(사용 녹아웃 3.2)

편집 : 일반적으로 기존의 자바 스크립트 않습니다 뭔가 같은 :

$('#productlist').append(productItemHtmlCode); 

내가 오히려 같은 것을 할 것이다 :

ViewModel.productList.push(productItemObject); 

Answer 1

하는 경우를 I 올바르게 이해하고 있습니다. 현재 다음과 같은 내용이 있습니다.

<div id='myDiv'> 
     current status is: <span id='statusSpan'>Active</span> 
</div> 

같은 것을 할 수있는 몇 가지 해당 자바 스크립트와

:

function toggleStatus() { 
    var s= document.getElementById('statusSpan'); 
    s.innerHTML = s.innerHTML == 'Active' ? 'Inactive' : 'Active'; 
} 

그리고 자바 스크립트는 DOM을 조작보다는 뷰 모델을 업데이트되도록 당신이 그것을 변경하려면?

var app = (function() { 

    var vm = { 
     statusText: ko.observable('Active'), 
     toggleStatus: toggleStatus 
    } 

    return vm 

    function toggleStatus() { 
     vm.statusText = vm.statusText == 'Active' ? 'Inactive' : 'Active'; 
    } 

})(); 

ko.applyBindings(app,document.getElementById('myDiv')); 

그리고 당신이 무슨 말을하는지 있다면 다음 HTML을

<div id='myDiv'> 
     current status is: <span id='statusSpan' data-bind="text: statusText"></span> 
</div> 

것, 즉 녹아웃을 위해 설계되었습니다거야. javascript는 viewmodel을 업데이트하고 knockout은 DOM을 조작합니다.

제공 한 예는 녹아웃에서 쉽게 나타낼 수 있습니다.

되는 HTML :

<div> 
     <table data-bind="foreach: products"> 
      <tr> 
       <td data-bind="text: id"></td> 
       <td data-bind="text: name"></td> 
       <td data-bind="text: category"></td> 
      </tr> 
     </table> 
    </div> 

와 뷰 모델에 :

vm = { 
    products: ko.observableArray(), // empty array to start 
    addProduct: addProduct 
} 

return vm; 

function addProduct(id, name, category) { 
    products.push({id: id, name: name, category:category}); 
} 

등