将 compose 数据绑定与另一个数据绑定一起使用答案

【问题标题】：using compose data-bind with another data-binding将 compose 数据绑定与另一个数据绑定一起使用
【发布时间】：2017-05-10 06:34:56
【问题描述】：

我在 Visual Studio 2013 中使用带有 MVC 5 的 Hot Towel 模板，现在我项目中的每个页面都有来自 hot towel 的默认代码，但我想设计一个看起来像这样的网站：@987654321 @ 当我向下滚动时，我可以看到网站的不同部分。但如果我想使用 Durandal 并淘汰我想我必须使用

   "data-bind="compose: { view: 'footer' }"

我的问题是，当我在主页中使用这行代码，然后在我的 footer.html 中使用另一种类型的数据绑定（我的页脚页也有单独的 java 脚本文件），例如文本绑定,文字不出现但如果我不使用 Compose 绑定，它将起作用。谁能告诉我如何建立一个网页，就像我想要的那样用热毛巾敲掉，非常感谢。

我的页脚视图是这样的：

<nav class="navbar navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
    <span class="pull-left"><a href="http://johnpapa.net/spa" target="_blank">Learn how to build a SPA </a></span>
    <span class="pull-right">
        <a data-bind="attr: { href: pm, title: title }"></a>
    </span>
</div>
</nav>

和footer.js：

define(['services/logger'], function (logger) {
var title = 'Home';
var pm = ko.observable('hi');
var vm = {
    activate: activate,
    title: title,
    pm:pm
};

return vm;

//#region Internal Methods

//#endregion

});

它们非常简单，只是为了检查结果

还有我想在那里看到页脚的主页：

<div>
<header data-bind="compose: { view: 'nav' }"></header>
<section id="content" class="main container-fluid"
    data-bind="router: { transition: 'entrance', cacheViews: true }">
</section>
<footer data-bind="compose: { view: 'footer' }"></footer>
</div>

但是当我运行我的项目时，结果如下：

【问题讨论】：

标签： knockout.js durandal hottowel

【解决方案1】：

问题是您只指定了您的页脚应该使用的view，但没有为您的view 指定相关的view model。

所以，你想像这样更新你的 compose 绑定 -

"data-bind="compose: { view: 'footer', model: 'footer' }"

不过，我建议使用observable 来存储您的view 和相应的model，以利用两种方式绑定。

因此，在您的主要viewModel 中，您将有一个像这样定义的observable -

self.footer = ko.observable({
    view: 'footer',
    model: 'footer',
    activationData: anyDataYouWouldLikeToInitializeYourFooterWith
});

然后像这样更新您的 compose 绑定 -

"data-bind="compose: footer"

这样，您可以将不同的视图动态地compose（以防它们一次都显示一个）进入您的主视图。

【讨论】：