如何使用 data-bind 作为 header 中的元内容？

Question

我在页面上有一个项目列表，选择后会将用户带到该特定项目页面。每个页面都需要一个带有项目名称和编号的元标记。为每个项目生成的页面是动态的。我一直在尝试使用 Knockout 绑定，但没有成功。

<meta name="DocumentType" content="ITEM">
<meta name="Number" data-bind="text: itemNumber">
<meta name="Name" data-bind="text: itemName">

在页面的其余部分，我一直在使用视图模型和 applyBindings 成功地使用数据绑定。我已将 itemName 和 itemNumber 添加到视图模型中，因此它们将 return 结果。此时，我如何 data-bind 将数据添加到我的元标记中？

我尝试使用 attr 标签来遵循 Knockout 的文档：http://knockoutjs.com/documentation/attr-binding.html

我也尝试过在此处绑定到 html 标题所做的操作： Is there a way to set the page title by data-binding using Knockout.js?

我没有任何运气。我可能做错了，但感谢您的帮助。

Answer 1

您应该能够将数据绑定应用于任何 DOM 元素。你没有提供你如何调用ko.applyBindings，但我在自己的项目中使用的是这样的：

ko.applyBindings(pageModel, document.getElementsByTagName('html')[0]);

通过将顶级 HTML 元素传递给它，在下面找到的任何 dom 元素都应该绑定到数据绑定元素。

Answer 2

我通过在 head 元素上应用数据绑定解决了这个问题，或者您也可以将它应用在 html 元素上，正如 Chris Knoll 在之前的回答中提到的那样。

然后继续将 "text" 绑定添加到标题元素：

<title data-bind="text: title"></title>

为了将值绑定到元标记的内容属性，我创建了一个自定义绑定：

// extra custom binding to bind content attribute of meta element
ko.bindingHandlers.metaContent = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        let contentAttribute = 'content';
        if (contentAttribute in element) {
            let value = valueAccessor();
            let valueUnwrapped = ko.unwrap(value);

            if (valueUnwrapped)
                element.content = valueUnwrapped;
        }
    }
};

具有使用自定义绑定的内容属性数据绑定的元元素：

<meta name="description" data-bind="metaContent: description" />

为了完整起见，我的视图模型：

export class Head {
    public title: KnockoutObservable<string> = ko.observable("My title");        
    public description: KnockoutObservable<string> = ko.observable("My description");

    constructor() {            
        ko.applyBindings(this, $("head")[0]);
    }
}

如何使用 data-bind 作为 header 中的元内容？

How can I use data-bind for meta content in the header?

meta-tags

knockout.js