从javascript填充剔除视图模型

Question

I'm in the process of replacing one hell of a lot of javascript/jquery code with knockoutjs and I'm trying to figure out the best way forward. I have no time to replace everything at the same time so I will have to integrate the knockout logic with the existing javascript...

Is there a way to populate a knockout view model from javascript which is not called from a data-bind attribute? Any help would be nice since I've not been able to find this anywhere else (at least not anything that worked).

I know what I'm mentioning here isn't the "correct" way of doing things, but I'm trying to migrate parts of the javascript code... Doing it all in one go isn't an option at the moment.

(using knockout 3.2)

Edit: Typically the existing javascript does something like:

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

And I would rather have it do something like:

ViewModel.productList.push(productItemObject);

Answer 1

If I understand correctly, currently you have something like this:

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

with some corresponding javascript that might be something like:

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

And you want to change it so that the javascript is updating the viewmodel rather than manipulating the 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'));

And then the html would be

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

If that's what you're talking about, that's what Knockout is designed for. The javascript updates the viewmodel, knockout manipulates the DOM.

The example you give is easy to represent in Knockout.

the 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>

and in the viewmodel:

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});
}

etc.