2016-12-09 5 views
0

どこかの基本的な概念が欠けていると思います。 以下のコードの出力は100%ですが、オブジェクトのプロパティは「監視」されていません。Knockout.js:ViewModelのプロパティが表示されない

<script> 
    var model = { }; 

    var mapping = {    
      create: function() { 
       var _profile; 
       $.ajax({ 
        type: "GET", 
        url: 'Manage.aspx/GetContact', 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        async: false, 
        success: function (results) { 
         _profile = results.d; 
        }, 
        error: function (err) { 
         alert(err.status + " - " + err.statusText); 
        } 
       }); 
       return _profile; 
      } 
    };  

    $(document).ready(function() {       
     var vm = ko.mapping.fromJS(model, mapping); 
     ko.applyBindings(vm); 
    }); 
</script> 

<dl class="dl-horizontal"> 
    <dt> 
    <label>E-Mail:</label></dt> 
     <dd><span data-bind="text: E_Mail" /></dd> 
     <dd><asp:TextBox runat="server" data-bind="value: E_Mail" /></dd> 
</dl> 

背後にある私のコード:このサンプルで

[WebMethod] 
[ScriptMethod(UseHttpGet = true)] 
public static DynamicsNAV.NavContact.Contact GetContact() 
{ 
    DynamicsNAV.NavContact.Contact contact = ReadContact(); 
    if(contact == null) 
    { 
     contact = new DynamicsNAV.NavContact.Contact(); 
     contact.E_Mail = HttpContext.Current.User.Identity.Name; 
    } 

    return contact; 
} 

、私はそれがないテキストボックス内の電子メールアドレスを変更するときにUIが更新されたかどうかを確認してみてください。 電子メールを追加した場合:ko.observable();プロパティをモデルに追加し、テキストボックスとラベルで使用すると、更新プログラムは正常に動作します。

私が行う場合は、次のページがロードされたとき

var model = ko.observable(); 

ませ値が表示されません。エラーは発生しません。

種類よろしく、 EV

+0

を表示するためにそれの地図しかしできなかった。このフィドルをチェックして、それがあなたがしようとしていることを表しているかどうかを確認できますか? https://jsfiddle.net/wgcdeyyf/ – user3297291

+0

実際にレンダリングされたHTMLをサーバー側のコントロールに使用して、問題のjsfiddleレプリケーションを作成できますか(サービス応答をスタブするだけです)? –

答えて

0

が回答をありがとう、それは私の問題を解決するために、パス上の私の思考プロセスを送っていました!

私の問題は、マッピングと処理の順序にあったようです。 一般に、マッピングで「作成」の機能を誤解しました。 私は、それがモデルの取得とデータ入力に役立つと思っていました。だから、これは私の解決策になってしまっ

  • 移入データ
  • 私はあなたが記述問題を再現しようとしたモデル

    var model = { }; 
    
    var vm; 
    $(document).ready(function() { 
    
        $.ajax({ 
         type: "GET", 
         url: 'Manage.aspx/GetContact', 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         async: false, 
         success: function (results) { 
          model = results.d; 
         }, 
         error: function (err) { 
          alert(err.status + " - " + err.statusText); 
         } 
        }); 
    
        vm = ko.mapping.fromJS(model); 
        ko.applyBindings(vm); 
    }); 
    
関連する問題