KnockoutでAjaxコール後にリストを更新するJS

Question

jQuery $.ajaxコールとKnockout JSを使用して生成されたページに添付ファイルのリストがあります。

私のHTMLは次のようになります（これはバック取り除かれる）：

$(function() { 
    getFormAttachments(); 
}); 

function getAttachments() { 
    var request = $.ajax({ 
    type: "GET", 
    datatype: "json", 
    url: "/Attachment/GetAttachments" 
    }); 

    request.done(function (response) { 
    ko.applyBindings(new vm(response)); 
    }); 
} 

マイビューモデル：

<tbody data-bind="foreach: attachments"> 
    <tr> 
    <td data-bind="text: Filename" /> 
    </tr> 
</tbody> 

私は、JSONレスポンスとして返される添付ファイルのリストを取得する機能を持っています次のようになります。

このリストを更新するには、時間の添付ファイルが削除/追加された可能性があります上：添付ファイルのリストの最初のレンダリングは結構です

$(function() { 
    $("#refresh").on("click", getAttachments); 
}); 

、しかし私は、リストをクリックして更新ボタンを経由して再びgetAttachmentsを呼び出すときに、実際に（に追加された各項目があります複数回複製）。

私はここで、この問題を示すためにjsFiddleを作成しました：

http://jsfiddle.net/CpdbJ/137

私が間違って何をしているのですか？

Answer 1

あなたのサンプルを修正するフィドルです。あなたの最大の問題は、あなたが 'applyBindings'を複数回呼び出すことでした。一般に、ページの読み込み時にapplyBindingsを呼び出すと、ページがビューモデルとやり取りされ、Knockoutがページの一部を更新します。

http://jsfiddle.net/CpdbJ/136

HTML

<table> 
    <thead> 
     <tr><th>File Name</th></tr> 
    </thead> 
    <tbody data-bind="foreach: attachments"> 
     <tr><td data-bind="text: Filename" /></tr> 
    </tbody> 
</table> 
<button data-bind="click: refresh">Refresh</button> 

javascriptの

$(function() { 
    var ViewModel = function() { 
    var self = this; 

    self.count = 0; 
    self.getAttachments = function() { 
     var data = [{ Filename: "f"+(self.count*2+1)+".doc" }, 
        { Filename: "f"+(self.count*2+2)+".doc"}]; 
     self.count = self.count + 1; 
     return data; 
    } 

    self.attachments = ko.observableArray(self.getAttachments()); 

    self.refresh = function() { 
     self.attachments(self.getAttachments());   
    } 
    }; 

    ko.applyBindings(new ViewModel()); 
}); 

からhttp://knockoutjs.com/documentation/plugins-mapping.html -

また、マッピング・プラグインを見てみたいことがあります。 JSONをView Modelに変換するのに役立ちます。さらに、オブジェクトの「キー」になるプロパティを割り当てることができます。これは、後続のマッピングで古いオブジェクトと新しいオブジェクトを判断するために使用されます。ここで

はフィドルが、私は同様のアイデアを証明するために戻ってしばらく書いている：

http://jsfiddle.net/wgZ59/276

注：私は私のマッピングルールの一部として、「更新」を使用しますが、唯一の私はにログインすることができますコンソール。マッピングプラグインが更新されたオブジェクトをどのように更新するかをカスタマイズしたい場合は、これを追加する必要があります。