将“with”绑定与命名模板一起使用时遇到问题答案

【问题标题】：Trouble using 'with' binding with a named template将“with”绑定与命名模板一起使用时遇到问题
【发布时间】：2012-09-14 01:30:57
【问题描述】：

我是淘汰赛的新手。我有一个带有交易列表的视图模型。我在页面左侧显示了其中的几个字段。当用户将鼠标悬停在其中一个上时，我想在页面右侧显示 tade 的详细信息。我的视图模型看起来像这样

 var self = this;
    self.selectedTrade = ko.observable(null);
    self.trades = ko.observableArray();
    self.selectTrade = function (item) {
        self.selectedTrade(item);
    }

当用户将鼠标悬停在左侧的某个项目上时，它会调用 selecttrade，因此 selectedTrade 有一个值。我在右侧有一个 div 绑定到 selectedTrade。

<ul data-bind="template: {name: 'tradelist', foreach: trades}" />
<script id='tradelist' type="text/html">
 <li> <span data-bind="text: Cname, event: { mouseover: $root.selectTrade } "/>&nbsp <span data-bind="text: Cparty"/></li>
</script>
</div>
<div data-bind="template: {with: selectedTrade(), name: 'displayTradeTemplate' }" />

<script id='displayTradeTemplate' type="text/html">

  <table>
            <tr>
                <td>
                    Contract Name:
                </td>
                <td>
                    <span data-bind="text: Cname">
                    </span>
                </td>
            </tr>
</table>

当我加载页面 javascript 时： Microsoft JScript 运行时错误：无法解析绑定。消息：语法错误：预期的标识符、字符串或数字；绑定值：模板：{with: selectedTrade(), name: 'displayTradeTemplate' }

任何人都知道该绑定有什么问题。

【问题讨论】：

标签： knockout.js

【解决方案1】：

在该模板绑定中使用data: 而不是with:

【讨论】：

这就是我原本拥有的，但是当我的页面加载时，我收到一个错误，说 CName 无效。当页面加载时，没有 selectedTrade。
这是一个 jsfiddle，如果我将 'with' 转换为 'data' 会得到一个错误，即 cname 是注释定义的。我感谢你的帮助。 jsfiddle.net/russellgove/bRhUQ/3
如果你需要防止空值，那么你也可以在你的模板绑定中添加一个if。它看起来像：template: { 'if': selectedTrade, data: selectedTrade, name: 'displayTradeTemplate' }。 if 用引号引起来，因为当前在 IE
好的，谢谢。这让我想到了那个问题。现在它显示列表，但是当我将鼠标悬停在一个项目上时，我收到一个 jscript 错误：Microsoft JScript 运行时错误：找不到 ID 为 displayTradeTemplate/ 的模板，新的 fiddel 位于jsfiddle.net/russellgove/bRhUQ/7
确保您不要自行关闭标签，例如 div、span 和 ul。他们需要像<span></span> 而不是<span />。这是一个更新版本：jsfiddle.net/rniemeyer/bRhUQ/8