javascript - knockout JS : Filtering a list unable to bind

Question

我很难让过滤器正常工作。我大致按照 http://www.knockmeout.net/2011/06/10-things-to-know-about-knockoutjs-on.html 中的示例进行操作，但我似乎无法让它发挥作用。非常感谢任何帮助。

HTML:

<h1><b>Medical Product Survey</b></h1>
<div class='facilities available'>
    <div class='bar'>
        <h2>Hospitals / Facilities</h2>
        <a class='button add'>+</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>
                    <input data-bind="value: filter, valueUpdate: 'afterkeydown'" />
                </th>
                <th>Modified</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'facilitiesAvailableRow', foreach: filteredFacilties }"></tbody>
    </table>

    <!-- Row template for available facilities -->
    <script type="text/html" id="facilitiesAvailableRow">
        <tr>
            <td>${name}</td>
            <td>${modified}</td>
            <td>${status}</td>
        </tr>
    </script>
</div>

<div class='facilities available'>
    <div class='bar'>
        <h2>Archived</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th><input type='search' id='facility_search' /></th>
                <th>Archive Date</th>
                <th>Size</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'facilitiesArchivedRow', foreach: facilitiesArchived }"></tbody>
    </table>

    <!-- Row template for available facilities -->
    <script type="text/html" id="facilitiesArchivedRow">
        <tr>
            <td>${name}</td>
            <td>${modified}</td>
            <td>${size}mb</td>
            <td><input type='button' value='restore' /></td>
        </tr>
    </script>
</div>

Javascript:

//Model for facilities interaction on the front page.
var viewModel = {
    facilitiesAvailable: ko.observableArray([
        { name: "Test 1", modified: "1/20/1986", status: "Good to go" },
        { name: "Test 2", modified: "1/21/1987", status: "Good to go2" },
        { name: "Test 3", modified: "1/22/1988", status: "Good to go3" },
        { name: "Test 4", modified: "1/23/1989", status: "Good to go4" },
        { name: "Test 5", modified: "1/24/1990", status: "Good to go5" }
    ]),
    facilitiesArchived: ko.observableArray([
        { name: "Archive 1", modified: "1/20/1982", size: 123 },
        { name: "Archive 2", modified: "1/21/1983", size: 198 },
        { name: "Archive 3", modified: "1/22/1984", size: 340 }
    ]),
    filter: ko.observable(""),
};

//Filtering.
viewModel.filteredFacilities = ko.dependentObservable(function() {
    var filter = this.filter().toLowerCase();

    if(!filter) {
        return this.facilitiesAvailable();
    } else {
        return ko.utils.arrayFilter(this.facilitiesAvailable(), function(item) {
            if(item.name.toLowerCase().search(filter) != -1) {
                return true;
            }
        });
    }
}, viewModel);

ko.applyBindings(viewModel);

我得到的错误是:

Uncaught Error: Unable to parse binding attribute.
Message: ReferenceError: filteredFacilties is not defined;
Attribute value: template: { name: 'facilitiesAvailableRow', foreach: filteredFacilties }

Answer 1

您拼错了 filteredFacilties。它应该是模板绑定(bind)中的 filteredFacilities。

改变:

data-bind="template: { name: 'facilitiesAvailableRow', foreach: filteredFacilties }"

到:

data-bind="template: { name: 'facilitiesAvailableRow', foreach: filteredFacilities }"