Question

我正在用knockoutjs替换一大堆javascript / jquery代码，我正试图找出最好的前进方法。我没有时间同时更换所有内容所以我必须将淘汰逻辑与现有的javascript集成...

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

我知道我在这里提到的并不是“正确”的做事方式，但我正在尝试迁移部分javascript代码......一气呵成，不是一个选择那一刻。

（使用淘汰赛3.2）

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

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

我宁愿让它做类似的事情：

ViewModel.productList.push(productItemObject);

Answer 1

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

<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更新viewmodel而不是操纵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更新了viewmodel，knockout操纵了DOM。

您提供的示例很容易在Knockout中表示。

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>

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

等

从javascript填充淘汰视图模型

1 个答案: