3

我有带有服务器构建的 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 被清除了。

4

1 回答 1

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>
于 2015-02-16T22:17:47.010 回答