値knockout.js

Question

にKo.observableにバインドされていないこれは私がテキストボックスにバインドするために使用するコードです：

var CategoryViewModel = { 
    categoryModel: ko.observable({ 
     categoryId: ko.observable(), 
     categoryName: ko.observable(), 
     active: ko.observable() 
    }), 
    GetCategoryById: function (data, event) { 
     CategoryViewModel.ClickId(event.target.id); 
     var ajaxUrl = ApplicationRootUrl("GetCategoryById", "Category") + "/" + CategoryViewModel.ClickId(); 

     $.ajax({ 
      type: "GET", 
      contentType: "application/json; charset=utf-8", 
      url: ajaxUrl, 
      dataType: "json", 
      success: function (data) { 
       if (data.isSuccess) { 
        // This value got bind to textbox 
        CategoryViewModel.categoryModel(data.data); 
       } 
      }, 
      error: function (err) { 

      } 
     }); 
    }, 
    CategoryAddButton: function() { 
     CategoryViewModel.categoryModel(); 
     $('#addCategoryModel').modal('toggle'); 
    }    
}; 

$(document).ready(function() { 
    ko.applyBindings(CategoryViewModel, document.getElementById("categoryMain")); 
}); 

CategoryAddButton方法をボタンクリックで呼び出されます。私はこのメソッドでモデル値を空にしようとしています。ここで

HTMLです：

<input type="text" name="CategoryName" class="form-control" placeholder="Enter Category Name" data-bind="textinput: categoryModel().categoryName"> 

テキストボックスの値はAJAX呼び出しにバインドされます。ただし、CategoryAddButtonメソッドが呼び出された後、値はテキストボックスにバインドされません。

Answer 1

まず、あなたが書いたものからビューモデルを作成するための別のアプローチを使用することをお勧めします。初心者の例でも同じことが行われていますが、それは単純なことです。実際、オブジェクトモデルとしてビューモデルを作成することはよくありません。これは、投稿されたhere、here、およびhereのうち、同じオブジェクトの別のプロパティにアクセスすることは、そのタスクがどれほど些細なものであるにもかかわらず、かなり汚くなる可能性があるためです。

この問題を解決するには、コンストラクタとnew演算子を代わりに使用する必要があります。これは、オブジェクトを大幅に簡単に操作できるようにするためです。しかし、私はこれをコンストラクタを使ってより洗練されたコードを書くためのガイドとしてのみ追加しました。オブジェクト構文ではこの問題だけでは解決されません。

質問に戻りましょう。コードが機能しない理由を調べるには、バインディングが動作しているときのデータの操作方法と、そうでないときの方法を調べます。

あなたは、AJAX呼び出しが成功した後、値が適切に更新されてバインディングが機能すると言ってきました。これは、AJAX呼び出しのsuccessコールバックでは、実際にはオブジェクトをcategoryModelに渡しているためです。しかし、私が指摘したいのは、あなたが渡すものは観測可能なものではなく、単純なオブジェクトだということです。だからそこにさえ、あなたは問題に遭遇するかもしれない。

また、ボタンをクリックした後に値が更新されなかったとも言われています。私はあなたがここで達成したいと思っているものは本当に確かではありません。あなたは何を表示したいのですか、データはどこから来るべきですか？このコード行なので、あなたが書いた：

CategoryViewModel.categoryModel(); 

は単にゲッターである - それはどのような方法でオブジェクトを変更しません、あなただけの、その値を読んでいます。実際にそれを変更せずに、もちろん変更はありません。

私はあなたにすべてのことを実装する可能性のある方法を提供します.JavaScriptのオブジェクトコンストラクタとノックアウトを正しく使用する方法については、さらに詳しくお読みください。

function categoryViewModel() { 
    var self = this; 

    // Don't wrap these in another observable, that's totally needless. 
    this.categoryId = ko.observable(null); 
    this.categoryName = ko.observable(null); 
    this.active = ko.observable(true); 

    // You could actually define this on the prototype 
    // but I don't want to make it even more complicated 
    this.GetCategoryById = function(categoryId) { 
     // You could do this if the value passed can either be a plain value 
     // or an observable; ko will return the actual value to you. 
     var catId = ko.utils.unwrapObservable(categoryId); 

     var ajaxUrl = ApplicationRootUrl("GetCategoryById", "Category") + "/" + catId; 

     $.ajax({ 
      type: 'GET', 
      contentType: "application/json; charset=utf-8", 
      url: ajaxUrl, 
      dataType: "json", 
      success: function(data) { 
       if (data.isSuccess) { 
        // Correct the object references according to 
        // the structure of the response if needed. 
        self.categoryId(data.data.id); 
        self.categoryName(data.data.name); 
        self.active(data.data.isActive); 
       } 
      }, 
      error: function(err) { 
      } 
     }); 
    }; 

    this.CategoryAddButton = function() { 
     self.categoryId(null); 
     self.categoryName(null); 
     self.isActive(true); // If you want to default to true. 
     $('#addCategoryModel').modal('toggle'); 
    }; 
}; 

$(document).ready(function() { 
    ko.applyBindings(new categoryViewModel(), document.getElementById("categoryMain")); 
}); 

そして、あなたのHTMLは次のようになります。GetCategoryById機能については

<input type="text" name="CategoryName" class="form-control" data-bind="textInput: categoryName" /> 

を、それも、あなたは関数のプロトタイプにそれを割り当てた場合よりよいのではなく、それぞれに「コピー」を割り当てることだろうとすべてのオブジェクトが作成されます。しかし、私はあなたがビューモデルのインスタンスを1つだけ持っていると仮定しているので、今は範囲外だと考えています。