KnockoutJS“点击：绑定不起作用答案

【问题标题】：KnockoutJS "click: binding not workingKnockoutJS“点击：绑定不起作用
【发布时间】：2015-07-31 22:22:28
【问题描述】：

我正在尝试创建一个页面，该页面将在单击另一个按钮时替换 DOM 元素中的内容。我正在使用 KnockoutJS 来管理绑定和单击事件。我的 ViewModel 中有一个方法，它将从文本文件中加载一些文本，并将 DOM 内容替换为文本文件内容。问题是点击似乎不起作用：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>About Me</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="js/knockout-3.3.0.js"></script>
        <script src="js/nav-mobile.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <!-- nav bar -->
        <nav>
            <ul class="navbar">
                <li><h1 class="title">About Me</h1></li>
                <li class="nav-text" data-bind="click: setPage.bind('fam')"><p>Family</p></li>
                <li class="nav-text" data-bind="click: setPage.bind('mlg')"><p>MLG</p></li>
                <li class="nav-text" data-bind="click: setPage.bind('bio')"><p>Bio</p></li>
                <li class="nav-text" data-bind="click: setPage.bind('int')"><p>Interests</p></li>
            </ul>
        </nav>

        <!-- main section -->
        <section>
            <div class="main">
                <p class="text-main"></p>
            </div>
        </section>
    </body>
</html>

JavaScript

$(document).ready(function() {
    function ViewModel() {
        var self = this;

        self.text = ko.observable();

        self.setPage = function(page) {
            $.get("../res/text/" + page + ".txt", function(data) {
                console.log("Fetching " + page + ".text" );
                $(".text-main").html(data);
            });
        }
    }

    ko.applyBindings(new ViewModel());
});

我至少希望将某些内容记录到控制台，但没有。开发人员工具不显示任何内容。我也尝试过这样的绑定：

data-bind="click: setPage('fam')"

但它不起作用。我的点击绑定有什么问题？

【问题讨论】：

您使用了调试器吗？你的get 有没有可能只是失败了？
setPage.bind('fam') 你应该只调用 setPage 然后在你的函数中 self.setPage = function(data,event) 你可以访问数据和事件，数据将代表发送对象与您的损益表中的文字

标签： javascript knockout.js

【解决方案1】：

使用.bind的正确语法是.bind($data, 'parameter')

<li class="nav-text" data-bind="click: setPage.bind($data, 'fam')"><p>Family</p></li>
<li class="nav-text" data-bind="click: setPage.bind($data, 'mlg')"><p>MLG</p></li>
<li class="nav-text" data-bind="click: setPage.bind($data, 'bio')"><p>Bio</p></li>
<li class="nav-text" data-bind="click: setPage.bind($data, 'int')"><p>Interests</p></li>

JsFiddle

【讨论】：