从 JavaScript 填充挖空视图模型

Populate knockout view model from javascript

本文关键字：视图 模型 JavaScript 填充      更新时间：2023-09-26

我正在用knockoutjs替换大量的javascript/jquery代码，我正在努力找出最好的前进方向。我没有时间同时替换所有内容，所以我将不得不将淘汰逻辑与现有的 javascript 集成......

有没有办法从 javascript 填充一个不是从数据绑定属性调用的挖空视图模型？任何帮助都会很好，因为我无法在其他任何地方找到它（至少没有任何工作）。

我知道我在这里提到的不是"正确"的做事方式，但我正在尝试迁移部分 javascript 代码......目前，一次性完成所有操作不是一种选择。

（使用挖空 3.2）

编辑：通常，现有的javascript执行以下操作：

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

我宁愿让它做这样的事情：

ViewModel.productList.push(productItemObject);

如果我理解正确，目前你有这样的东西：

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

使用一些相应的JavaScript，可能是这样的：

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

你想改变它，以便javascript更新视图模型而不是操作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>

如果这就是你在说的，那就是Knockout的设计目的。 javascript更新视图模型，挖空操作DOM。

你给出的例子很容易在淘汰赛中表示。

该网页：

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

等。

相关文章：