2017-05-18 11 views
0

私はKnockoutJSに新しく、私はUIにデータを取得するムービーAPIに基づいた学校プロジェクトにこれを使用しています。KnockoutJS - データバインディングエラー

これは、すべてのjavascriptのコードは私のapp.jsです:

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 }" Message: Unable to process binding "text: function (){return Title }" Message: Title is not defined

誰かが正しい方向に向かい、何が間違っているのか教えてもらえますか?おかげさまで

答えて

2

あなたの観測の宣言に括弧が欠落しています

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

、あなたのobservableArrayの特性は、(あなたがmapping pluginに見たいと思うかもしれません)、デフォルトでは観測が行われないことを注意してください。

関連する問題