Подписка MathJax + Knockout.js

Я использую Knockout.js для динамической вставки значений на основе вызова Ajax. Одно из этих значений, content.front, представляет собой текст utf8, который может содержать выражения MathJax. Я пытаюсь понять, как заставить MathJax отображать выражения каждый раз, когда Knockout.js обновляет div. Я не могу заставить его работать, и я не уверен, почему. Вот JavaScript:

var ViewModel = function(data) {
  var self = this;
  self = ko.mapping.fromJS(data, {}, self);
  self.content.back.subscribe( function() {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub,"preview-back"]);
  });
};

и Гамлет:

 <div .wrap>
   <div .tab-content>
     <div .tab-pane #preview-back data-bind="text: content.back">

(HTML, который отображает этот Гамлет, действителен html 5...)

В нынешнем виде Knockout.js отображает текст в соответствующем div. И когда я меняю текст, div тоже меняется. И MathJax, похоже, срабатывает — всплывает маленькое всплывающее окно «Набор текста 100%». Но div не меняется.


mathjax knockout.js
person nomen    schedule 10.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, в итоге я сделал кастомную привязку для нокаута. Я тоже использую jquery здесь:

ko.bindingHandlers.mathjax = {
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever the associated observable changes value.
    // Update the DOM element based on the supplied values here.
    var value = valueAccessor(), allBindings = allBindingsAccessor();

    var valueUnwrapped = ko.unwrap(value);
    // the replace is an artefact of my encoding.  Maybe I will use markdown instead.
    $(element).html(valueUnwrapped.replace(/\n/g, '<br>'));
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,element]);
  }
};

ViewModel остается прежним, а HTML-шаблон:

     <div data-bind="mathjax: content.back"></div>

Надеюсь, это поможет кому-то еще!

person nomen    schedule 10.10.2013