如何在使用组合视图时避免展开部分？

在我的单页应用程序中的不同位置，我使用构图将一个视图组合成另一个视图。同时，当某些页面加载时，我注意到了一些动画效果，就像段落随着绑定动态扩展一样，发生了。我非常肯定，这与杜兰达的转场无关，因为我禁用了这种转变，并且仍然获得了不断扩大的“动画”效果。如何在使用组合视图时避免展开部分？

今天早上我创建了一个新视图，将一些现有的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

如何在使用组合视图时避免展开部分？

回答

相关问题