Question

我今天在Hot Towel API中使用knockout数据绑定时遇到了问题。以下面的例子为例......

var vm = {
    item: { entry: 'yes' }
}

return vm

和html

<div data-bind="text: item.entry"></div>

这很有效，但是当我修改js以动态添加div时

var vm = {
    canActivate: canActivate,
    activate: activate,
    attached: attached,
    item: { entry: 'yes' }
}

return vm

function canActivate(){
     return true;
}

function activate() {
     logger.log(title + ' View Activated', null, title, true);
     return true;
}

function attached() {
     $('#page').append('<div data-bind=\"item.entry\"></div>);
}

数据绑定失败。我试图使用ko.cleanNode然后尝试重新绑定DOM对象，但得到一个无法重新应用绑定消息。有没有人想出一个动态添加DOM数据绑定的解决方案？

Answer 1

您可以使用模板和ko.renderTemplate方法来实现此目标（see fiddle）。

<强> HTML

<div id="page"></div>

<script type="text/html" id="appendedEntry">
    <div data-bind="text: entry"></div>
</script>

<强> JS

var vm = {
    item: { entry: 'yes' },
    append: appendDiv
};

function appendDiv() {
    ko.renderTemplate('appendedEntry', vm.item, {}, document.getElementById('page'));    
}

ko.applyBindings(vm);

vm.append();

您可以在this article中详细了解ko.renderTemplate方法（确切地说它的作用及其参数）。

此外，虽然我不确定它是否适用于您的具体情况，但请记住，Durandal具有delayed binding handlers，允许您的普通KO绑定处理程序在视图合成完成后与DOM元素交互。

Answer 2

如果您想避免手动渲染元素，可以这样做：

http://jsfiddle.net/Akn5T/

<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: entry"> </span>
    </li>
</ul>

<button data-bind="click: add">Add new</button>

function vm() {
    var items = ko.observableArray([
        { entry: 'yes' },
        { entry: 'no' },
        { entry: 'maybe' }
        ]);

    function add(){
        items.push({entry: "new"})
    }

    return {
        items: items,
        add: add
    }
};

ko.applyBindings(vm);

您基本上想要在viewmodel中表示您的数据库，然后忘记通过在视图中使用适当的绑定来手动渲染它。

热毛巾 - 动态Dom元素数据绑定

2 个答案: