Knockout Bindings问题

Question

当我点击按钮将数据加载到表格中时，我不断收到错误。数据加载但Chrome工具会抛出以下错误。

  

您无法多次将绑定应用于同一元素

我正在运行的代码如下所示。

<!-- Nav tabs -->

<ul class="nav nav-tabs">
    <li class="active"><a href="#1" data-toggle="tab">AM</a></li>
    <li><a href="#2" data-toggle="tab">CM</a></li>
    <li><a href="#3" data-toggle="tab">IM</a></li>
<li><a href="#4" data-toggle="tab">KT</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">

<div class="tab-pane active" id="1">
    <table class="table table-hover">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
    </table>
</div>
<div class="tab-pane" id="2">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Link</th>
                <th>Link1</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Questions">
            <tr>
                <td data-bind="text: title"></td>
                <td data-bind="text: author"></td>
                <td>
                    <button type="button" class="btn btn-link">Link</button>
                </td>
                <td>
                    <button type="button" class="btn btn-link" data-bind="text: questionLink">    </button>
                    <!--<a class="btn" type="button"   href="http://example.com">Default (Gray) Button</a>-->
                    <!--<a class="btn" data-bind="href: questionLink">Default (Gray) Button</a>-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="tab-pane" id="3"></div>
<div class="tab-pane" id="4"></div>

<p><button id="clickMe" value="clickme" type="button" onclick="AddQuestions();">Load Questions</button></p>

<script type="text/javascript">
    function AddQuestions() {
    var self = this;
    self.Questions = ko.observableArray();
    self.Questions.push(new Question('1', '1', '1', '1', '1'));
    self.Questions.push(new Question('2', '2', '2', '2', '2'));
    ko.applyBindings();


function Question(label, id, title, author, questionLink) {
    var self = this;
    self.Label = ko.observable(label);
    self.ID = ko.observable(id);
    self.title = ko.observable(title);
    self.author = ko.observable(author);
    self.questionLink = ko.observable(questionLink);
}
}
</script>

Answer 1

问题是你不止一次调用ko.applyBindings。你应该每页只调用一次。

function Questions() {
    var self = this;
    self.Questions = ko.observableArray();

    self.addQuestions = function() {
        self.Questions.push(new Question('1', '1', '1', '1', '1'));
        self.Questions.push(new Question('2', '2', '2', '2', '2'));
    };

function Question(label, id, title, author, questionLink) {
    var self = this;
    self.Label = ko.observable(label);
    self.ID = ko.observable(id);
    self.title = ko.observable(title);
    self.author = ko.observable(author);
    self.questionLink = ko.observable(questionLink);
}
}

ko.applyBindings(new Questions());


<button id="clickMe" value="clickme" data-bind="click: $root.addQuestions()">Load Questions</button></p>

Answer 2

每个DOM元素只能调用一次ko.applyBindings。

使用ko.applyBindings(viewmodel)为整个页面调用一次，或使用ko.applyBindings(viewmodel, domElement)调用所需的元素。

请注意，您无法直接在jQuery对象上调用它：

ko.applyBindings(viewmodel, $("#myObj"));

不行。

如果需要，请使用此选项：

ko.applyBindings(viewmodel, $("#myObj").get(0));