Question

我有一个产品列表，其中名称是产品详细信息视图的链接。产品列表是“结果”视图

Samsumg
iPhone

当用户点击产品时，会显示“详细信息”模板，并且不显示“结果”模板;至少那是我想要的行为。

我使用以下代码来完成此行为，并在此处使用jsFiddle http://jsfiddle.net/justinnafe/mLf5G/：

<div data-bind="template: displayMode"></div>

<script type="text/html" id="Result">
<ul data-bind="foreach: products">
    <li><a href="#" data-bind="text: name, click: $parent.switchDisplayMode"></a></li>
</ul>
</script>

<script type="text/html" id="Details">
    <p data-bind="text: name"></p>
    <p data-bind="text: description"></p>
</script>

和javascript：

var view = {
                name: "Result"
            };

var initialProducts = [{
    name: "Samsumg",
    description: "The best phone"
},{
    name: "iPhone",
    description: "The other best phone"
}];

var viewModel = (function (){
    var products = ko.observableArray(initialProducts),
        displayMode = ko.observable(view),
        switchDisplayMode = function(item){
            if (displayMode() == 'Result') {
                displayMode({ name: "Details", data: item });                
            }
            else {
                displayMode({ name: "Result", data: item });
            }
        };

    return {
        products: products,
        displayMode: displayMode,
        switchDisplayMode: switchDisplayMode
    };
})();

ko.applyBindings(viewModel);

我正在尝试将该产品传递给详细信息模板，但一直未成功。任何线索或提示都会有所帮助。

当我点击链接时，我正在收到“ReferenceError：产品未定义”错误，但不确定如何修复它。也许如果我修复了这个错误，切换视图将按预期运行。

Answer 1

在切换模板的函数中，您忘记了displayMode observable正在持有一个对象 - 而不是字符串值。

所以在switchDisplayMode内，displayMode() = { name: 'Result' }。将其切换为displayMode().name可解决问题。见updated fiddle

使用模板淘汰多视图

1 个答案: