Как я могу использовать привязку данных для мета-контента в заголовке? - PullRequest
Новая
       6

Как я могу использовать привязку данных для мета-контента в заголовке?

0 голосов
/ 13 июня 2018

У меня есть список элементов на странице, который при выборе приведет пользователя на страницу конкретного элемента.Каждая страница нуждается в метатеге с названием и номером элемента.Страница, созданная для каждого элемента, является динамической.Я безуспешно пытался использовать привязки Knockout. 

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

В остальной части страницы я успешно использовал привязку данных с использованием модели представления и applyBindings.Я включил itemName и itemNumber в модель представления, чтобы они возвращали результаты.На этом этапе, как я могу привязать данные к моим метатегам?

Я пытался следовать документации для Knockout, используя тег attr: http://knockoutjs.com/documentation/attr-binding.html

Я также пыталсячтобы сделать то, что было сделано для привязки к заголовку html, здесь: Есть ли способ установить заголовок страницы с помощью привязки данных с помощью Knockout.js?

Мне не повезлос этими.Я мог бы делать их неправильно, но любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Я решил эту проблему, применив привязки данных к элементу head, или вы также можете применить его к элементу html, как упоминал Крис Нолл в предыдущем ответе.

Затем приступил к добавлению привязки «текст»к элементу title: 

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

Чтобы связать значение с атрибутом содержимого метатега a, я создал пользовательскую привязку: 

// 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 с привязкой данных дляАтрибут содержимого с использованием пользовательской привязки: 

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

Для полноты моей viewmodel: 

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]);
    }
}
0 голосов
/ 28 июня 2018

Вы должны иметь возможность применять привязки данных к любому элементу DOM.Вы не указали, как вы называли ko.applyBindings, но то, что я использую в своем собственном проекте, выглядит следующим образом:

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

Передавая элемент HTML верхнего уровня, любойЭлементы dom, найденные в, должны быть связаны с элементами привязки данных.

...