MathJax + Knockout.js订阅

Question

我正在使用knockout.js动态插入基于Ajax调用的值。其中一个值content.front是包含MathJax表达式的utf8文本。我试图找出如何让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也改变了。 MathJax似乎正在被触发 - 小型的“排版100％”弹出窗口正在弹出。但分区没有变化。

Answer 1

好吧，所以我最终为淘汰赛制作了一个自定义绑定。我使用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]); 
    } 
}; 

视图模型保持不变，和HTML模板是：

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

希望这将帮助别人！