2013-01-21 2 views
0

ViewModel을 SQL 서버에 저장하고 싶습니다. 표준 knockout ko.toJSON (viewModel)은 나에게 정의되지 않은 오류를주고있다. 그래서 약간의 파기 후에 나는이 Question을 찾았지만 여전히 나에게 정의되지 않은 것을 준다.서버에 KnocloutJS viewmodel로 데이터 저장

여기 내 viewmodel의 코드입니다.이 코드는 2 가지 통화 간의 전환율을 가져 오는 통화 변환 테이블입니다.

//ko Event Handler for datepicker.js 
    ko.bindingHandlers.datepicker = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      //initialize datepicker with some optional options 
      var options = allBindingsAccessor().datepickerOptions || {}; 
      $(element).datepicker(options).on("changeDate", function (ev) { 
       var observable = valueAccessor(); 
       observable(ev.date); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).datepicker("setValue", value); 
     } 
    }; 


    //Currency Model Definition 
    var currency = function (data) { 
     var self = this; 
     self.DateCreated = ko.observable(formatJsonDate(data.DateCreated)); 
     self.CurrencyFrom = ko.observable(data.CurrencyFrom); 
     self.CurrencyTo = ko.observable(data.CurrencyTo); 
     self.ConversionRate = ko.observable(data.ConversionRate); 

     //Yhoo Finance API 
     ko.computed(function() { 
      var from = self.CurrencyFrom(), 
       to = self.CurrencyTo(); 


      if (!from || !to) { 
       self.ConversionRate("N/A"); 
       return; 
      } 

      getRate(from, to).done(function (YahooData) { 
       console.log("got yahoo data for [" + from + "," + to + "]: ", YahooData); 
       self.ConversionRate(YahooData.query.results.row.rate); 
      }); 
     }); 
    } 

    var NewDate = new Date().getFullYear() + '-' + ("0" + (new Date().getMonth() + 1)).slice(-2) + '-' + new Date().getDate(); 


    var CurrencyModel = function (Currencies) { 
     var self = this; 
     self.Currencies = ko.observableArray(Currencies); 

     self.AddCurrency = function() { 
      self.Currencies.push({ 
       DateCreated: NewDate, 
       CurrencyFrom: "", 
       CurrencyTo: "", 
       ConversionRate: "" 
      }); 
     }; 

     self.RemoveCurrency = function (Currency) { 
      self.Currencies.remove(Currency); 
     }; 

     self.Save = function() { 

      $.ajax({ 
       url: "#", 
       contentType: 'application/json', 
       data: ko.mapping.toJSON(CurrencyModel), 
       type: "POST", 
       dataType: 'json', 
       success: function (data) { 
        //I get undefined.... 
        alert(ko.mapping.toJSON(CurrencyModel)); 
       }, 
       error: function (data) { alert("error" + data); } 
      }); 
     } 

     $.ajax({ 
      url: "CurrencyConfiguration.aspx/GetConfiguredCurrencies", 
      data: '{}', 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "JSON", 
      timeout: 10000, 
      success: function (Result) { 
       //     callback(Result); 
       var MappedCurrencies = 
       $.map(Result.d, 
      function (item) { 
       getRate(item.CurrencyFrom, item.CurrencyTo); 
       return new currency(item); 
      } 
     ); 
       self.Currencies(MappedCurrencies); 

      }, 
      error: function (xhr, status) { 
       alert(status + " - " + xhr.responseText); 
      } 
     }); 

    }; 

    function formatJsonDate(jsonDate) { 
     var FormatDate = new Date(parseInt(jsonDate.substr(6))); 
     var Output = FormatDate.getFullYear() + '-' + ("0" + (FormatDate.getMonth() + 1)).slice(-2) + '-' + FormatDate.getDate(); 
     return (Output); 
    }; 

    function getRate(from, to) { 
     return $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + from + to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=?"); 
    } 

     function callback(data) { 
     if (viewModel) { 
      // model was initialized, update it 
      ko.mapping.fromJS(data, viewModel); 
     } else { 
      // or initialize and bind 
      viewModel = ko.mapping.fromJS(data); 
      ko.applyBindings(viewModel); 
     } 
    } 

    $('#Date').datepicker(); 

    $(document).ready(function() { 
     var VM = new CurrencyModel(); 
     ko.applyBindings(VM); 
    }) 

답변

2
data: ko.mapping.toJSON(CurrencyModel) 

당신과 JSON 제대로 웁니다 (NULL, 2, $ 루트) 정의되지

+0

내가 볼 경우 CurrencyModel의 $ root 요소를 봅니다. { "통화": [{ "DateCreated": "2013-01-20", "CurrencyFrom": "ZAR", "CurrencyTo": "USD" ConversionRate ":"0.1125 "}]}. 그래서 CurrencyModel 대신에 Currency를 매핑해야합니까? –

+0

당신은 자기 나 이걸 사용해야하고, 포스트를 캔슬해서 그런 식으로 할 필요가 있습니다. 작업은 비동기이므로 포스트가 완료되기 전에 가져 오기를 할 것입니다. – Anders

+0

게시 방법이 더 좋을까요? 버튼의 이벤트를 클릭하십시오 –

1

사용하려는 method 아닌가요 :

ko.toJSON 

보다는 매핑 객체 오프

?

+0

내가 내 디버깅을 위해 내가 ko.toJSON을 사용합니까, 내 경고에 parsererror을 얻을 실제 인스턴스를 JSONify하려고 –

+0

무슨 뜻인지 확실하지 않습니다. 귀하의 질문에있는 코드에서 ko.mapping.toJSON을 사용했으며 ko.toJSON을 사용해야합니다. –

+0

ko.mapping.toJSON은 ko.toJSON보다 훨씬 강력합니다. 순환 참조와 함께 작동합니다. – Anders