ko.toJSONを使用してメインファイル内のコンポーネントをデバッグする|ノックアウト

Question

ノックアウトコンポーネントとして私のビュー（html）と私のviewModel（js）を登録しました。私のメインファイル（index.html）では、コンポーネントをデータバインドしてさまざまなビューを表示します。この時点でko.toJSON（$ data、null、2）でhtmlのviewModelを素早くデバッグしたいとき、デバッグしたいeverey htmlファイルにko.toJSONのdata-bindinを追加する必要があります。私はメインファイル（index-html）でのみko.toJSONをデータバインドし、viewModel/$ data？を渡すようなもっと一般的な方法を持っていますか？それに。

Answer 1

デバッグ要素を含む最も簡単な方法は、コンポーネントを登録するときにテンプレートをラップすることです。

すでにvmとテンプレートを保持するinitオブジェクトがあるため、登録する直前にtemplateプロパティを再割り当てして、<pre> html文字列を追加することができます。例えば

：

var appendDebugPre = function(htmlString) { 
 
    var pre = document.createElement("pre"); 
 
    pre.setAttribute(
 
    "data-bind", 
 
    "html: ko.toJS($data, null, 2)" 
 
); 
 
    
 
    // Might be better to create a documentFragment, 
 
    // but for debug purposes, this might be enough 
 
    return htmlString + pre.outerHTML; 
 
}; 
 

 
// Regular register: 
 
var c = messageEditor(); 
 

 
ko.components.register(c.name, c.init); 
 

 
// Register a debug version: 
 
ko.components.register("debug-" + c.name, 
 
    Object.assign({}, c.init, { 
 
    template: appendDebugPre(c.init.template) // Here, we wrap the template 
 
    })); 
 

 

 
ko.applyBindings({}); 
 

 

 
// Utils: 
 
// From knockout docs, an example component: 
 
function messageEditor() { 
 
    return { 
 
    name: 'message-editor', 
 
    init: { 
 
     viewModel: function(params) { 
 
     this.text = ko.observable(params && params.initialText || ''); 
 
     }, 
 
     template: 'Message: <input data-bind="value: text" /> ' + 
 
     '(length: <span data-bind="text: text().length"></span>)' 
 
    } 
 
    }; 
 
}; 
 

 
// Stub 
 
ko.toJS = function(vm) { 
 
    return JSON.stringify(
 
    Object.keys(vm).reduce(function(res, k) { 
 
     res[k] = ko.unwrap(vm[k]); 
 
     return res; 
 
    }, {}), 
 
    null, 
 
    2 
 
); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<div data-bind="component: 'message-editor'"></div> 
 
<div data-bind="component: 'debug-message-editor'"></div>