如何在使用組合視圖時避免展開部分？

在我的單頁應用程序中的不同位置，我使用構圖將一個視圖組合成另一個視圖。同時，當某些頁面加載時，我注意到了一些動畫效果，就像段落隨着綁定動態擴展一樣，發生了。我非常肯定，這與杜蘭達的轉場無關，因爲我禁用了這種轉變，並且仍然獲得了不斷擴大的「動畫」效果。如何在使用組合視圖時避免展開部分？

今天早上我創建了一個新視圖，將一些現有的HTML從另一個視圖複製到它中，並用新組合的子視圖替換了父視圖中的HTML。換句話說，父視圖從這個去：

<div data-bind="visible: contactPerson, with: contactPerson"> 
    <span data-bind="text: firstName"></span><br /> 
    <span data-bind="text: lastName"></span><br /> 
</div>

這樣：

<div data-bind="compose: { model: 'viewmodels/contact-view', activationData: { contactPerson: contactPerson } }"></div>

在測試這個變化我立刻注意到，原來的版本有沒有擴張的動畫效果而組成的版本一樣。在玩過Durandal過渡之後，我得出這樣的結論：這很可能與此無關，但更可能是由於延遲插入子視圖HTML。

新的子視圖模型非常簡單，所以我沒有看到任何問題，除非它與它不是單例的事實不同，在這種情況下它不可能是單例。

define(['services/dataservice', 
     'services/logger'], 
    function (dataservice, logger) { 
     return function() { 
      var self = this; 

      var contactPerson = ko.observable(); 

      var activate = function (activationData) { 
       contactPerson(ko.unwrap(activationData.contactPerson)); 
      }; 

      // Make sure required internally defined functions and properties are exported. 
      self.activate = activate; 
      self.contactPerson = contactPerson; 
     }; 
    });

任何人都可以幫我弄清楚如何擺脫過渡效應嗎？如果有人想看看它，我可以發佈前後的視頻。

來源

2014-09-13 Rhynier

它真的是一個「擴展效果」，還是隻是插入一個組合視圖，而這個組合視圖必然會向下推動一切？ – 2014-09-14 01:32:23

我會說這是後者 - 我只是想描述它的外觀。重點仍然是使用組合會導致這種效果，我寧願它不會:)。這只是將一個視圖組合成另一個視圖的成本？ – Rhynier 2014-09-17 05:52:56

看一下，然後，在我發佈的答案下面。 – 2014-09-17 16:21:43

如果您處於禁用緩存的調試模式，則組合綁定比構建應用程序慢得多。由於調試模式以及它如何編寫和評估每個綁定到控制檯，您會看到這種效果。如果您想禁用它，請關閉調試模式或查看應用程序的內置版本。

來源

2014-09-15 14:16:24

謝謝你的建議。我確實已經啓用了調試模式（假設你正在談論Durandal的調試標誌）並返回並禁用了它。它通過使效果看起來不像是一個擴展動畫，更像是一個令人討厭的閃爍（一個緩慢的閃爍）而產生了效果。 – Rhynier 2014-09-17 05:54:56

也可以考慮使用weyland或grunt來構建你的應用程序，在開始生產之前加速它的速度 – 2014-09-17 12:36:57

組成本身並不會導致您目睹的效果。這很可能是一個CSS問題。我們多次見證了同樣的效果（尤其是在試圖定位等待微調時），它總是CSS。

在那些我們希望爲傳入視圖「騰出空間」的情況下，我們在容器上設置了CSS，這樣容器就可以容納視圖，從而讓容器「擴展」了，可以這麼說。如果你願意，可以考慮「佔位符」。

來源

2014-09-17 16:21:17

如何在使用組合視圖時避免展開部分？

回答

相關問題