KnockoutJS - 데이터 바인딩 오류

Question

저는 처음으로 KnockoutJS입니다. UI로 데이터를 가져 오는 영화 API를 기반으로하는 학교 프로젝트에이 템플릿을 사용하고 있습니다.

이 모든 자바 스크립트 코드가 내 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

누군가 나를 올바른 방향으로 향하게하고 내가 뭘 잘못하고 있다고 말할 수 있습니까? 감사합니다. .

Answer 1

당신은 당신의 관찰 가능한 선언에 괄호가 누락되었습니다 :

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

는 또한, 기본적으로 observableArray 할 수 없습니다 관찰 가능한의 특성 (당신이 mapping plugin로 볼 수도 있습니다) 조심하십시오.