Question

我有使用服务器构建的现成HTML的页面，让我们说：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

我需要将这些元素链接到视图模型。通过调用'ko.applyBindings(viewModel, $('#list')[0])'后的另一个词，我希望viewModel从现有HTML中获取其值。所以我做了以下几点：

<ul id="list" data-bind="foreach: items">
    <li data-bind="text: title">Item 1</li>
    <li data-bind="text: title">Item 2</li>
</ul>

并期望viewModel从上面的元素中获取items数组。但结果是DOM被清除了。

Answer 1

我假设您无法将来自服务器的html绑定到您的视图模型。

这意味着您将尝试从现有HTML逆向工程视图模型，您需要遍历DOM以生成您正在寻找的结果。

因此，使用绑定重命名列表，以便您的应用绑定具有一个目标：

<ul id="list2" data-bind="foreach: Items">
    <li data-bind="text: title"></li>

然后你将需要处理原始的html列表，你无法使用敲除和遍历dom来获取值。

    var viewModel = {
       Items= ko.observableArray();
    }

    //select your list
    var list = $('#list');

    //iterate through the children and add to the observable array
    ko.utils.arrayForEach(list.children(),function(i){
        viewModel.Items.push({Title:i.text()});
    }

     //then you can bind the view model to your html that has the knockout bindings

     ko.applyBindings(viewModel, )
</script>

绑定现有HTML以查看模型

1 个答案: