Hot Towel - 动态 Dom 元素数据绑定答案

【问题标题】：Hot Towel - Dynamic Dom element data bindingsHot Towel - 动态 Dom 元素数据绑定
【发布时间】：2014-04-28 15:02:19
【问题描述】：

我今天遇到了在 Hot Towel API 中使用敲除的数据绑定问题。举个例子……

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 数据绑定的解决方案？

【问题讨论】：

请问你为什么要附加一个元素？使用淘汰赛时，您不应该做太多的事情。相反，您将拥有一个项目列表，然后让淘汰赛使用 foreach 绑定为您呈现它们。添加一个新的......然后你只需将它添加到视图模型列表中，它就会立即工作和渲染。
这就是我现在正在研究的内容，但就我正在做的事情而言，这是一项艰巨的任务，因为我的页面布局是数据库驱动的。

标签： jquery html knockout.js hottowel

【解决方案1】：

您可以使用模板和ko.renderTemplate 方法来实现此目的 (see fiddle)。

HTML

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

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

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 元素进行交互。

【讨论】：

【解决方案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);

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

【讨论】：