KnockoutJS - 数据绑定错误答案

【问题标题】：KnockoutJS - Data binding errorKnockoutJS - 数据绑定错误
【发布时间】：2017-10-18 12:10:13
【问题描述】：

我是 KnockoutJS 的新手，我正在将它用于一个学校项目，该项目基于一个电影 API，我从中获取数据到 UI 中。

这是我的 app.js，其中所有的 javascript 代码都在：

var ViewModel = function() {
    var self = this;
    self.movies = ko.observableArray;
    self.error = ko.observable;

    var moviesUri = '/api/movies/';

    function ajaxHelper(uri, method, data) {
        self.error('');
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function(jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllMovies() {
        ajaxHelper(moviesUri, 'GET').done(function(data) {
            self.movies(data);
        });
    }

    getAllMovies();
};

ko.applyBindings(new ViewModel());

这是我的 index.html 显示数据的地方：

@section scripts {
    @Scripts.Render("~/bundles/app")
}

<div class="page-header">
    <h1>Movie Database API</h1>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Movies</h2>
            </div>
            <div class="panel-body">
                <ul class="list-unstyled" data-bind="foreach: movies">
                    <li>
                        <!--<strong>
                            <span data-bind="text: DirectorName"></span>
                        </strong>:--> <span data-bind="text: Title"></span>
                        <small>
                            <a href="#">Details</a>
                        </small>
                    </li>
                </ul>
            </div>
        </div>
        <div class="alert alert-danger" data-bind="visible: error">
            <p data-bind="text: error"></p>
        </div>
    </div>

    <div class="col-md-4">
        <!-- TODO: Movie details -->
    </div>

    <div class="col-md-4">
        <!-- TODO: Add new movie -->
    </div>
</div>

我检查了代码，它看起来不错，但是当我运行我的应用程序时，我进入控制台：

Uncaught ReferenceError: Unable to process binding "foreach: function (){return movies }”消息：无法处理绑定“文本：函数 (){return Title }" 消息：标题未定义

谁能指出我正确的方向并告诉我我做错了什么？谢谢。

【问题讨论】：

标签： javascript jquery knockout.js data-binding

【解决方案1】：

您的 observables 声明中缺少括号：

var ViewModel = function() {
    var self = this;
    self.movies = ko.observableArray();
                                  //^^ here
    self.error = ko.observable();
                            //^^ here
    //...
}

此外，请注意您的 observableArray 的属性默认情况下不会成为可观察的（您可能需要查看 mapping plugin）。

【讨论】：