Question

在我的单页应用中的各个地方，我使用合成将一个视图组合成另一个视图。同时我注意到某些页面加载时的一些动画效果，几乎就像部分动态扩展为绑定等一样。我很确定这与Durandal的过渡无关，因为我禁用了它并且仍然具有扩展的“动画”效果。

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

有人可以帮我弄清楚如何摆脱过渡效应吗？如果有人想看一下，我可以发布之前和之后的视频。

Answer 1

组合本身不会导致您正在目睹的效果。这很可能是一个CSS问题。我们多次见证了相同的效果（特别是在尝试定位等待微调器时），它始终是CSS。

在我们想要为传入视图“腾出空间”的情况下，我们将CSS设置在容器上，该容器将使容器“已经扩展”，可以这么说。如果愿意，可以考虑“占位符”。

Answer 2

如果您处于调试模式且禁用了缓存，则组合绑定比构建的应用程序慢得多。您会看到这种效果，因为调试模式以及它如何编写和评估每个绑定到控制台。如果要禁用它，请关闭调试模式或查看应用程序的内置版本。

在使用合成视图时如何避免扩展部分？

2 个答案: