KnockoutJS - 可以使用SPA的父/子視圖模型嗎？

我需要知道KnockoutJS是否可以支持一個應用程序結構化，以便有一個主容器div已與applyBindings綁定到某個視圖模型，然後在該div內有一個具有其自己視圖模型的子div，但他們能夠相互溝通？KnockoutJS - 可以使用SPA的父/子視圖模型嗎？

<div id="main"> 
    <div id="child"> 

    </div> 
</div>

然後

ko.applyBindings(pageViewModel, document.getElementById('main')); 
ko.applyBindings(childViewModel, document.getElementById('child'));

但隨後有「子」內的某些元素能夠調用的pageViewModel而不是childViewModel存在的功能？我覺得沒有這個功能，Knockout可能不支持完整的spa設置。事實上這在某種程度上可能嗎？

來源

2015-11-29 mls3590712

ko.components.register('message-editor', { 
 
    viewModel: function(params) { 
 
    this.clickFn = params.clickFunction 
 
    }, 
 
    template: '<button data-bind="click:clickFn">Click</button>' 
 
}); 
 

 
vm = { 
 
    fn: function() { 
 
    console.debug("Doing something in the parent"); 
 
    }, 
 
    fn2: function() { 
 
    console.debug("Also something in the parent"); 
 
    } 
 
}; 
 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<h4>First instance, without parameters</h4> 
 
<div data-bind='component: { 
 
       name: "message-editor", 
 
       params: {clickFunction: fn} 
 
       }'></div> 
 

 
<h4>Second instance, passing parameters</h4> 
 
<div data-bind='component: { 
 
    name: "message-editor", 
 
    params: { clickFunction: fn2 } 
 
}'></div>

是的，你正在尋找components。主視圖模型可以引入任意數量的組件並將它們的值傳遞給它們的視圖模型，包括在主視圖模型上操作的可觀察值或函數。

來源

2015-11-29 21:27:54

我還沒有以這種方式使用組件，所以我正在尋找一個能夠「傳遞它們可以在主視圖模型上運行的函數」的例子 – mls3590712

@ mls3590712我已經添加了一個簡單示例。 –

KnockoutJS - 可以使用SPA的父/子視圖模型嗎？

回答

相關問題