使用 Knockout 的模板绑定答案

【问题标题】：Using Template Binding of Knockout使用 Knockout 的模板绑定
【发布时间】：2015-09-15 06:45:58
【问题描述】：

我创建了一个 jsFiddle，我正在学习 Knockout 的模板绑定。举个简单的例子，我成功地应用了模板绑定。但是，当我创建包含 css 的这个 jsfiddle 示例（如下）时。它不适合我。我在哪里错过这个。

<h2>Participants</h2>
Here are the participants:
<h3> Info Here
 <div class="span8">
 <div class="profile-container on" id="ResponsibilityGrid" data-bind="template: { name: 'responsibilities-template', foreach: ProductsInformation }">
                </div>
     </div><script type="text/html" id="responsibilities-template">
<ul>
    <li>
        <div tabindex="-1" data-bind="text: Name"></div>
        <div tabindex="-1"></div>
        <div class="icon" tabindex="-1"></div>
        <div class="sborder" tabindex="-1" style="display: none;"></div>
        <div class="sborder bottom" tabindex="-1" style="display: none;"></div>
    </li>

    <!-- ko foreach: Responsibilities -->
    <li>
        <div tabindex="-1" data-bind="text: Name"></div>
        <div class="icon" tabindex="-1"></div>
        <div class="sborder" tabindex="-1" style="display: none;"></div>
        <div class="sborder bottom" tabindex="-1" style="display: none;"></div>
    </li>
    <li>
        <div tabindex="-1" data-bind="text: Name" class="break-word"></div>
        <div class="icon" tabindex="-1"></div>
        <div class="sborder" tabindex="-1" style="display: none;"></div>
        <div class="sborder bottom" tabindex="-1" style="display: none;"></div>
    </li>
    <!-- /ko -->
</ul>
</script>

这里是 jsfiddle 的网址：https://jsfiddle.net/xejx5sh0/

我是 knockout.js 的新手，正在努力学习它。如果我犯了任何错误，我会要求忽略。任何帮助将不胜感激。

谢谢，

【问题讨论】：

"is not working" 不是一个有用的问题陈述。怎么了？您是否在控制台中看到错误？
如果没有您的 JavaScript，我们将无法帮助您。（必须是在问题中，而不仅仅是链接。）
问题中引用的 HTML 打开但从不关闭模板。没有</script> 结束标记。
使用 jsfiddle 和 http，而不是 https。否则无法加载 KO 库。如果您这样做，Chrome 控制台会告诉您：Uncaught ReferenceError: Unable to process binding "template: function (){return { name:'person-template',data:buyer} }" Message: buyer is not defined
我很抱歉这个连接

标签： jquery css knockout.js jsfiddle knockout-2.0

【解决方案1】：

替换

<div tabindex="-1" data-bind="text: Name"></div>

与

<div tabindex="-1" data-bind="text: name"></div>

并且在您的 JSFiddle 中，您已经在模板内的点击事件上调用了一个函数。

<li data-bind="click: GetQuickLookProfile">

但是这个 GetQuickLookProfile 函数在 javascript 上不存在。您必须删除该数据绑定或使 GetQuickLookProfile 使其工作。希望这会有所帮助。

【讨论】：