Question

在我的项目中，我想使用Knockout动态生成菜单。因此，我使用HTML绑定将section元素绑定到viewmodel以动态加载内容。

$(document).ready(function(){
   $('#facebook-icon').hover(function(){
            $(this).attr('src','images/icon/facebook-hover-icon.svg');
            }, function(){
            $(this).attr('src','images/icon/facebook-icon.svg');
        });
     });

这适用于常规HTML源代码。但是，另一个要求是，那些内部HTML节点有时应该绑定到它们自己的视图模型。

我的第一个想法是使用afterRender事件并在其中应用新绑定。这种方法首先失败了，因为已经有一个viewmodel已应用于这些节点。

<div class="flex" data-bind="foreach:  { data: menuItems, afterRender: renderedHandler }">
    <div class="leBorderContainer" data-bind="attr: {onclick: $data.clickEvent}">
        <img data-bind="attr: {src: $data.imageUrl}" />
        <h2 data-bind="text: $data.header"></h2>
        <section data-bind="html: $data.content"></section>
    </div>
</div>

经过一些研究后，我发现在绑定到另一个viewmodel之前必须取消绑定这些节点。同样，这不起作用，因为它完全清除了我的section元素。

然后我尝试将with binding与html绑定结合使用。这种方法再次没有成功，因为它不允许使用html和绑定在同一个元素上。

let vm = {
    menuItems: [] as Array<{ clickEvent: () => void, imageUrl: string, header: string, content: string, getViewModel?: () => object }>,
    renderedHandler: function (elements: Array<HTMLElement>, data: { clickEvent: () => void, imageUrl: string, header: string, content: string, getViewModel?: () => object }) {
        console.log(elements);
        console.log(data);
        if (data.getViewModel) {
            //console.log($(elements).find('section'));
            ko.applyBindings(data.getViewModel(), elements[1]);
        }   
    }
};

我不知道，我怎么能让我的菜单工作。我希望有人可以帮助我。

Answer 1

我通过使用带有nodes参数的模板绑定找到了一个解决方案：

<section data-bind="template: { nodes: $($data.content), data: $data.getViewModel ? $data.getViewModel() : null }"></section>

knockout.js：将内部html绑定到单独的viewmodel

1 个答案: