Question

我是KnockoutJS的新用户，我将其用于学校项目，该项目基于电影API，我将数据导入用户界面。

这是我的 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>

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

未捕获的ReferenceError：无法处理绑定＆＃34; foreach：function （）{返回电影}＆＃34;消息：无法处理绑定＆＃34; text：function （）{return Title}＆＃34;消息：标题未定义

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

Answer 1

您的observables声明中缺少括号：

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

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

KnockoutJS - 数据绑定错误

1 个答案: