1

次のコードを使用して、ajax 呼び出しからデータを取得し、ページのさまざまなセクションにバインドします。

$.getJSON("api/RedeemProduct", { 'productId': productId }, function (data) {
    categoryViewModel = ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory);
    ko.applyBindings(categoryViewModel, $('section.intro').get(0));

    activityTypesViewModel = ko.mapping.fromJS(data);
    ko.applyBindings(activityTypesViewModel, $('.categories-gallery .frame').get(0));

    activeActivityViewModel = ko.mapping.fromJS($('.categories-gallery .frame .category.active').data('wishlist-activity'));
    ko.applyBindings(activeActivityViewModel, $('#details-box').get(0));

コードの最初の行を参照してください。特定の製品のデータを取得しています。次回、同じコードを使用して別の製品のデータをバインドすると、バインディングが更新されず、ko.applyBindings() を呼び出すために同じ製品が複数回追加されます。

古いバインディングを削除し、新しいデータをセクションにバインドするにはどうすればよいですか?

4

5 に答える 5

8

何度も使うのはやめましょうko.applyBindings。これはタグwikiに入れる必要があると思います。

決して、これをしないでください。

1回呼び出しますko.applyBindings（要素ごとに、それがこれを行う方法ですが、それでも1回です）。その後、ビューモデルを更新すると、バインドされた要素が自動的に更新されます。それがバインディングの要点です。

于 2012-08-17T21:42:48.113 に答える
2

解決策を見つけました。電話する必要があります

ko.mapping.fromJs

そして、次のように更新する必要があるnewdataandを渡しますviewmodel

ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory, categoryViewModel);
于 2012-08-18T18:37:33.220 に答える
1

この問題に対処している Knockout.js 公式ページのチュートリアルをご覧ください。

つまり、(特定のページ セクションに対して) 1 回だけ呼び出す必要がapplyBindings()あり、更新されたデータを取得するときに、このような新しいデータで監視可能なビュー モデルを更新する必要があります。

var updatedCategoryViewModel = ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory);
categoryViewModel(updatedCategoryViewModel);
于 2012-08-17T21:44:32.227 に答える
0

これが誰かの助けになることを願っています.Knockoutは私にとって旅であり、心を壊すモデルでした.

ボタンがクリックされたときに多少のものをロードする必要があったので、最初はこれが役立つと思いました。これが私の最初のアプローチでした:

var Task = function(name, description) {
    this.name = ko.observable(name);  
    this.description = ko.observable(description);      

}

var ViewModel = function() {
    var self = this;
    self.tasks = ko.observableArray();

    self.clearTask = function(data, event) {

           self.tasks.remove(data);   

    };
    self.addTask = function() {
        var task = new Task("new", "");        
        self.tasks.push(task);
    };
    self.addTask2 = function (name, description)
    {
        var task = new Task(name, description);        
        self.tasks.push(task);
    }

};
var vm = new ViewModel();
vm.addTask2("Dog Food","description");
ko.applyBindings(vm);

function ClickedMoreItems()
{
    vm = new ViewModel()
    vm.addTask2("Dog Food2","description");
    vm.addTask2("Dog Food3","description");    

}
function ClickedLessItems()
{
    vm = new ViewModel()
    vm.addTask2("Dog Food4","description");        

}

ClickedMoreItems() を押すと、何も起こりませんでした。そこで、各機能ko.applyBindings(vm);で再度使用することにしましたが、うまくいきました。しかし、ClickedLessItems を押すと、「Dog Food4」が 2 回複製されました。

function ClickedMoreItems()
    {
        vm.Clear();
        vm.addTask2("Dog Food2","description");
        vm.addTask2("Dog Food3","description");    
        ko.applyBindings(vm);        
    }
    function ClickedLessItems()
    {
        vm.Clear();
        vm.addTask2("Dog Food4","description");  
        ko.applyBindings(vm);        
    }

だから私はこれを行うことに決めました。

  1. ko.applyBindings(vm);Tyrsius が推奨するように、開始時にのみ使用してください。
  2. 明確な機能を作成する

したがって、最終的なコードは次のとおりです。

var Task = function(name, description) {
    this.name = ko.observable(name);  
    this.description = ko.observable(description);                
}

var ViewModel = function() {
    var self = this;
    self.tasks = ko.observableArray();

    self.clearTask = function(data, event) {

           self.tasks.remove(data);   

    };
    self.addTask = function() {
        var task = new Task("new", "");        
        self.tasks.push(task);
    };
    self.addTask2 = function (name, description)
    {
        var task = new Task(name, description);        
        self.tasks.push(task);
    }
    self.Clear = function()
    {
        self.tasks.removeAll();
    }
};
var vm = new ViewModel();
vm.addTask2("Dog Food","description");
ko.applyBindings(vm);

function ClickedMoreItems()
{
    vm.Clear();
    vm.addTask2("Dog Food2","description");
    vm.addTask2("Dog Food3","description");    

}
function ClickedLessItems()
{
    vm.Clear();
    vm.addTask2("Dog Food4","description");  

}

ここで実際のコードを見ることができます

于 2013-07-19T19:42:46.957 に答える