ノックアウトでテンプレートバインディングURL接頭辞を設定するには？

Question

私は何百ものノックアウトテンプレートを持つUIを持っています。今度は別のUIを開発しましょう。私はテンプレートファイルのURLに古い参照を "uiv1"で接頭語を付ける必要があります。例えば、どこ私は

data-bind="name: 'admin/dashboard'" 

はノックアウトでそれを設定するための簡単な方法があり、私はそれが

data-base="name: 'uiv1/admin/dashboard' 

に解決を期待すると言いますか？たとえば、私はko.applyBindings（）に渡すことができるいくつかの設定？私はそこにソースで何も見ていないが、おそらく私は行方不明のいくつかの他の方法。

Answer 1

可能であれば、すべてのインスタンスの名前を変更する方がよいでしょう。

そうでなければ、ここではそれを行うためのhackish方法です。私の情報のため

var old_template = ko.bindingHandlers['template']; 
 
var prefix = 'uiv1/' 
 

 
// modifying template binding 
 
ko.bindingHandlers['template'] = { 
 
    'init': function(element, valueAccessor) { 
 
    var bindingValue = ko.utils.unwrapObservable(valueAccessor()); 
 
    if (typeof bindingValue === 'string') bindingValue = prefix + bindingValue; 
 
    else if (bindingValue.name) bindingValue.name = prefix + bindingValue.name; 
 
    return old_template.init(element, function() { 
 
     return bindingValue 
 
    }); 
 
    }, 
 
    'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
    return old_template.update(element, valueAccessor, allBindings, viewModel, bindingContext); 
 
    } 
 
} 
 

 
// view model 
 
var vm = { 
 
    buyer: { name: 'Franklin', credits: 250 }, 
 
    seller: { name: 'Mario', credits: 5800 }, 
 
    original: { name: 'original', credits: 20000 } 
 
}; 
 

 
ko.applyBindings(vm, document.getElementById('modified')); 
 

 
//resetting it to original 
 
ko.bindingHandlers['template'] = old_template; 
 

 
ko.applyBindings(vm, document.getElementById('original'));

body { font-family: monospace; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 
<script type="text/html" id="uiv1/admin/dashboard"> 
 
    <h3 data-bind="text: name"></h3><span>(from: "uiv1/admin/dashboard")</span> 
 
    <p>Credits: <span data-bind="text: credits"></span> 
 
    </p> 
 
</script> 
 
<script type="text/html" id="dashboard"> 
 
    <h3 data-bind="text: name"></h3><span>(from: "dashboard")</span> 
 
    <p>Credits: <span data-bind="text: credits"></span> 
 
    </p> 
 
</script> 
 

 
<div id="modified"> 
 
    Modified Template 
 
    <div data-bind="template: { name: 'admin/dashboard', data: buyer }"></div> 
 
    <div data-bind="template: { name: 'admin/dashboard', data: seller }"></div> 
 
</div> 
 
<hr> 
 
<div id="original"> 
 
    Original Template 
 
    <div data-bind="template: { name: 'dashboard', data: original }"></div> 
 
</div>