Question

我正在使用下面给出的淘汰赛“foreach”;我基本上试图迭代一个集合并将其结果打印（绑定）到我的html页面。集合对象“topics”是主题对象的列表。

“Topic”对象具有以下属性; 链接和翻译。

链接属性本身代表;

 < a href ------ />

传统的绑定提供了这样的解决方案;

     self.loadTemplates = function() {

        var bookTopics = "<h5 class=\"book-nav-title\" data-bind=\"text: title\"></h5>\
                         <ul id=\"navBookItems\" class=\"nav nav-stacked book-nav\">\
                            <!-- ko foreach: topics -->\
                                <li><a data-bind=\"attr: { href: link, title: translation }\"><span data-bind=\"text: translation\"></span><i class=\"pull-right\"></i></a></li>\
                            <!-- /ko -->\
                         </ul>";


        self.templateEngine.addTemplate("ui_bookTopics_tmplt", bookTopics);
    }

但正如我所指定的那样，link属性本身就是一个href属性，这就是为什么我想将传入的链接值原样绑定到<li>块中的原因。基本上我希望将链接的值与$link类似。有没有办法做到这一点？

self.loadTemplates = function() {

        var bookTopics = "<h5 class=\"book-nav-title\" data-bind=\"text: title\"></h5>\
                         <ul id=\"navBookItems\" class=\"nav nav-stacked book-nav\">\
                            <!-- ko foreach: topics -->\
                                <li>$link<span data-bind=\"text: translation\"></span><i class=\"pull-right\"></i></a></li>\
                            <!-- /ko -->\
                         </ul>";

        self.templateEngine.addTemplate("ui_bookTopics_tmplt", bookTopics);
    }

简言之，

该链接具有以下值;

  <a href="/bookHistory.html" >History101</a>

要生成的预期<li>;

 <li><a href="/bookHistory.html"><i class="pull-right"> History101   </i></a></li>

主题对象示例：

topic = {
    link: "<a href='/bookHistory.html'>History101</a>",
    originalText: "History101",
    section: "First",
    translation: "History101"
}

Answer 1

我认为您应该使用自定义绑定来实现您想要的效果。

ko.bindingHandlers.linkMe = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var link = value.link.replace(value.originalText, '<i class="pull-right"></i>'+ value.translation);
        $(element).html(link)
    }
}

使用以下html：

<ul id="navBookItems" class="nav nav-stacked book-nav" data-bind="foreach: topics">
    <li data-bind="linkMe: $data"></li>
</ul>

我做了一个小提琴here。

我同意替换功能有点hacky：S

使用Knockout

1 个答案: