observableArray에서 항목의 속성을 업데이트 내가 KnockoutJS을 사용하고

Question

템플릿 지속 ...

나는 나의 뷰 모델에 영화의 observableArray 있습니다. 제목 별 동영상이므로 같을 것이다 배열에 푸시 될 전형적인 JSON 응답하는 사용자를 검색 ...

{data : [{ 
    Id: 12345, 
    Title: 'Movie1', 
    Year: 2010, 
    Character: [{ 
     Name: 'Character1', 
     Person: { Id: 1, Name: 'Person1' } 
    },{ 
     Name: 'Character2', 
     Person: { Id: 2, Name: 'Person2' } 
    }], 
    UserMovies: [{ 
     Id: 8 
     IsWatched: false, 
     Rating: 3.5, 
     UserId: 'e1e9c075-1ded-4e7d-8d30-d5d1fbd47103' 
    }] 
}]} 

각 영화의 UserMovies 재산권에 대한 특정 정보를 나타낼 경우,이 배열은 업데이트되며 그 사용자는 자신의 개인 평점이나 영화를 보았는지 등을 알 수 있습니다.

나는 동영상을 데이터베이스의 컬렉션에 "추가"할 수있는 권한을 부여합니다. 그들이 자신의 컬렉션에 영화를 추가하면 해당 영화에 대해 업데이트 된 UserMovies 속성을 가진 json 응답이 다시 전송됩니다.

나는 단지 그 속성을 업데이트하려고 시도하고 나서 그것을 녹아웃 템플릿에 유지하려고한다. 여기에 내 현재의 ViewModel ...

function viewModel() { 
    // private properties 
    var self = this; 

    // public properties 
    self.movies = ko.observableArray([]); 
    self.searchValue = ko.observable(); 

    // public operations 
    self.search = function() { 
     self.isLoading(true); 
     $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) { 
      self.movies(data); 
     }); 
    }; 
    self.add = function (movie) { 
     $.ajax({ 
      type: 'POST', 
      url: arguments[1].currentTarget.attributes[1].value, 
      data: JSON.stringify({ movie: movie }), 
      contentType: 'application/json', 
      dataType: 'json', 
      success: function (data) { 
       // how to just update UserMovies property and persist to template for the given movie? 
      } 
     }); 
    }; 
} 

ko.applyBindings(new viewModel()); 

내가 속성을 업데이트하는 방법을 잘 모르겠지만까지 녹아웃 템플릿에 데이터를 지속으로 나는 각 영화의 UserMovies 속성은 그 자체 때문에 그것은 생각입니다 관찰 가능하므로 업데이트 된 것이 있으면 템플릿에서 자동으로 변경되지 않습니다.

필자는 모든 속성을 관찰 가능하게 만드는 매핑 플러그인에 대해 읽었습니다. 이것은 내 영속성 문제를 해결할 수 있지만 observableArray 또는 매핑 플러그인을 통해 UserMovies 속성을 업데이트하는 방법을 아직 확실하지 않습니다.

업데이트

내가 매핑 플러그인을 사용하여 바이올린을 만들었습니다. UserMovies 속성 대신 전체 동영상을 반환하면 배열의 항목을 훨씬 쉽게 업데이트 할 수 있습니다. 나는 그것이 작동하도록하는 몇 가지 문제를 가지고 있고 나는 UserMovies 속성에 대한 '키'에 대한 매핑을 만드는 방법을 알아 내려고 애 쓰고 있습니다. http://jsfiddle.net/cmBd9/3/

Answer 1

매핑 옵션을 사용하여 매핑 플러그인을 사용할 수있었습니다.fromJS()이 업데이트하거나 여기 내 업데이트 된 코드의 새로운 UserMovie

을 추가할지 여부를 알려는 각 UserMovie의 ID로 볼 것이다 호출 할 때 나는 ...

각각의 UserMovie의 아이디로 UserMovies에 대한 키를 설정

function viewModel() { 
    // private properties 
    var self = this; 
    var mapping = { 
     'UserMovies': { 
      key: function (data) { 
       return ko.utils.unwrapObservable(data.Id); 
      } 
     } 
    }; 

    // public properties 
    self.movies = ko.mapping.fromJS([]); 
    self.searchValue = ko.observable(); 

    // public operations 
    self.search = function() { 
     self.isLoading(true); 
     $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) { 
      ko.mapping.fromJS(data, {}, self.movies); 
     }); 
    }; 
    self.add = function (movie) { 
     $.ajax({ 
      type: 'POST', 
      url: arguments[1].currentTarget.attributes[1].value, 
      data: ko.toJSON({ movie: movie }), 
      contentType: 'application/json', 
      dataType: 'json', 
      success: function (data) { 
       if(data.success) { 
        ko.mapping.fromJS(data.movie, mapping, movie); 
       } 
      } 
     }); 
    }; 
} 

Answer 2

사용자가 올바르게 알기에 UserMovies 속성이 관찰 가능하지 않다는 사실은 사용자가 업데이트해도 UI에서 아무 것도 발생하지 않는다는 것을 의미합니다. 그럼에도 불구하고, 여기에 당신이 (비 관찰) UserMovies를 업데이트 할 수있는 방법입니다 :

self.add = function (movie) { 
    $.ajax({ 
     type: 'POST', 
     url: arguments[1].currentTarget.attributes[1].value, 
     data: JSON.stringify({ movie: movie }), 
     contentType: 'application/json', 
     dataType: 'json', 
     success: function (data) { 
      ko.utils.arrayForEach(self.movies(), function(m) { 
       if (m.Id == movie.Id) { 
       m.UserMovies = data; 
       } 
      }); 
     } 
    }); 
}; 

가 확실히 mapping plugin을 확인하십시오. 필자의 유일한 관심사는 JSON에서 객체를 처음으로 매핑하는 방법과 나중에 JSON에서 전체 객체를 업데이트하는 방법을 설명하는 설명서입니다.

그러나 개체를 JSON에서 매핑하고 나중에 JSON에서 해당 개체의 부분 만 업데이트하는 것에 대해서는 언급하지 않은 것 같습니다. 작동하는지 여부는 확실하지 않습니다.

문제가있는 경우 add 메소드에 대한 서비스 호출을 통해 전체 무비 객체를 반환하면 매핑 플러그인에서 선언 한 모델을보다 자세히 준수 할 수 있습니다.