Question

我在使用MVC 5的visual studio 2013中使用Hot Towel模板，现在我项目中的每个页面都有来自热毛巾的默认代码，但我想设计一个看起来像这样的网站：{{ 3}} 当我向下滚动时我可以看到网站的不同部分。但如果我想使用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>

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

http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/

Answer 1

问题是，您只是指定了您的页脚应该使用view而不是view model的相关view。

因此，您希望更新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个不同的视图（如果它们一次只显示一个）进入主视图。

使用compose data-bind与另一个数据绑定

1 个答案: