可能將依賴關係跟蹤與knockout js中的行爲分開嗎？

Question

在我目前的項目中，我們曾與許多觀測和觀察的陣列名義模型在一個視圖模型與修改數據的行爲一起。在項目後期，我們希望將在一個「屏幕」上的信息分成兩個屏幕。這導致如何分解viewModel，因此每個屏幕只處理其數據上的行爲。最終這被發現太難分割，我們將相同的視圖模型綁定到兩個「屏幕」。

我想知道是否有辦法有一個獨立的「模型」對象存儲的可觀察的/可觀察到的陣列的讓你有依賴性跟蹤。這樣你可以共享圍繞數據和依賴關係跟蹤的模型對象。之後，viewModel的每個屏幕都包含特定於該屏幕的行爲？

我知道我可以有一個包含一個單獨的模型對象觀察到的，並用「與」兩個視圖模型的內部的模型結合，但我想知道是否有另一種方式。

Answer 1

是的，有。

基因敲除3.2.0版本開始，你可以用「基因敲除Web組件」

讓我們來想象你想要做一個「徽章」，像這樣

<div class="badge"> 
    <h1>Name: <span>Joe Blogs</span></h1> 
    <h3>Position: <span>Engineer</span></h3> 
</div> 

現在，讓我們來看看這個從可重用的角度來看。

你可能要動態地改變位是名和位置

，如果你有這些基因敲除已經工作，你可能有類似以下內容：

<div id="thebadge" class="badge"> 
    <h1>Name: <span data-bind="text: name">xxx</span></h1> 
    <h3>Position: <span data-bind="text: position">xxx</span></h3> 
</div> 

VAR BadgeViewModel = { ：然後你可能實際上淘汰賽中，像下面這樣使用它名：ko.observable（ '喬博客'）， 位置：ko.observable（ '工程師'） };

然後您可以使用的東西應用到你的HTML如下所示：

ko.applyBindings(BadgeViewModel); 

注：我只是在做簡單的事情在這裏展示的概念

到目前爲止，好...這是做事的經典方式，如果你有這樣的做法，把它轉換成一個組件並不困難。

您只需只需要您的視圖模型，你的HTML模板組合成一個單一的實體。

所以在這裏我們的例子中，我們可以使用：

ko.components.register("my-badge", { 
    viewModel: function(data) { 
    this.name = (data && data.name) || "Not Defined"; 
    this.position = (data && data.position) || "Not Defined"; 
    }, 
    template: '<div id="thebadge" class="badge"><h1>Name: <span data-bind="text: name">xxx</span></h1><h3>Position: <span data-bind="text: position">xxx</span></h3></div>' 
}); 

一旦您註冊您的組件，然後你可以只使用它的註冊名稱在你的HTML標記如下：

<my-badge></my-badge> 

你的徽章將出現。

然而問題在於，您沒有初始化任何數據。

如果在第二個例子中的代碼看VM，你會看到我們傳遞給我們的模型一個「數據」對象，我們檢查該看它是否和我們的名和位置屬性存在。

如果他們沒有我們讓他們平等的「未定義」

要通過在您的參數，您只需使用PARAMS屬性如下：

<my-badge params="name: 'Joe Blogs', position: 'engineer'"></my-badge> 

，這將讓特性稱爲名稱和位置可用於組件。

重複使用很容易，重複剛纔的標記，如：

<my-badge params="name: 'Joe Blogs', position: 'Engineer'"></my-badge> 
<my-badge params="name: 'Fred Blogs', position: 'Scientist'"></my-badge> 
<my-badge params="name: 'Andrew Blogs', position: 'Developer'"></my-badge> 
<my-badge params="name: 'Tony Blogs', position: 'Manager'"></my-badge> 

有更好的方法，如果你讀了淘汰賽JS網站上的組件文件，他們建議您使用requirejs或其他模塊加載器來幫助您只在需要時加載html塊。

只是使用它們一次或兩次，但提供可重複使用的意見，是很容易的，如果你讓他們在單獨的.js文件。