從ajax JSON響應在Knockout.Js中綁定關聯數組

Question

我遇到了使用knockout.js綁定json響應的問題。任何人都可以幫助我指出正確的方向嗎？下面有兩個版本的代碼。版本1正在工作，但用戶需要搜索。如果他們搜索不止一次，就會因爲已經應用了綁定而中斷。

版本1

var self = this; 

self.Jobs = ko.observableArray(); 
self.Count = ko.observable(); 
self.Score = ko.observable(); 
self.Highlights = ko.observable(); 
self.Document = ko.observableArray(); 
self.id = ko.observable(); 
self.title = ko.observable(); 
self.description = ko.observable(); 
self.company = ko.observable(); 

self.error = ko.observable(); 


var jobsUri = '/home/search/'; 


function getAllJobs() { 

    var search = $('#search').val(); 

    $.post(jobsUri, { 
     search: search 
    }, 

    function (data) { 
     viewModel = { 
     Jobs: data.Results, 
     Count: data.Count, 
     Document: Jobs.Document, 
     id: Document.id, 
     title: Document.title, 
     description: Document.description, 
     company: Document.company 
     } 
     ko.applyBindings(viewModel, $('#jobs').get(0)); 
    }); 

} 

2版似乎工作和元素出現在DOM，但由於某種原因，我似乎並沒有能夠與淘汰賽訪問的元素顯示在前端。

2版

function ViewModel() { 

    var self = this; 

    self.data = ko.observableArray(); 

    getAllJobs(); 

} 


function getAllJobs() { 

    var self = this; 

    self.Jobs = ko.observableArray([]); 
    self.Count = ko.observable(); 
    self.Score = ko.observable(); 
    self.Highlights = ko.observable(); 
    self.Document = ko.observableArray(); 
    self.id = ko.observable(); 
    self.title = ko.observable(); 
    self.description = ko.observable(); 
    self.company = ko.observable(); 
    self.error = ko.observable(); 


    var jobsUri = '/home/search/'; 

    var search = $('#search').val(); 

    $.post(jobsUri, { 
     search: search 
    }, 

    function (data) { 
     viewModel = { 
      Jobs: data.Results, 
      Count: data.Count, 
      Document: Jobs.Document, 
      id: Document.id, 
      title: Document.title, 
      description: Document.description, 
      company: Document.company, 

     } 
    }); 

} 


var viewModel = new ViewModel(); 
ko.applyBindings(viewModel); 

的HTML是非常基本的。如上所述，它適用於上面的版本1代碼，但不適用於版本2！

<div class="row" id="jobs search"> 

    <input type="text" id="search" class="form-control" value="" placeholder='"Senior Manager" "Corporate Finance" London "Investment Banking"' /> 

    <input type="submit" class="typeahead search-submit btn btn-success btn-block " value="Search" onclick="getAllJobs();" /> 

    <hr /> 

    <div data-bind="foreach: Jobs"> 
     <div class="jobs-list"> 
      <h3 class="job-title" data-bind="text: Document.title"></h3> 
      <p data-bind="text: Document.company"></p> 
      <p data-bind="text: Document.description"></p> 

     </div> 
    </div> 
</div> 

我覺得我已經嘗試了一切可能，但只是沒有破解它！任何幫助不勝感激。在此先感謝

Answer 1

您的代碼違反了基本原則的挖空應用程序：視圖模型/視圖分離。

你不應該在你的viewmodel中有任何DOM交互或jQuery代碼。 （除了jQuery的Ajax調用，但你可以很容易地將它們替換爲另一個Ajax庫），事實上，除非你使用jQuery UI或其他具有顯式jQuery依賴性的工具，否則應該考慮將jQuery完全丟棄在一個挖掘應用程序中。無論如何，只是爲了方便Ajax jQuery有點太重了。）

如果您想在viewmodel中訪問一個值（如搜索項），請爲它創建一個可觀察值，通過value綁定將該可觀察對象綁定到控件。

像這樣：

function JobSearchForm() { 
    var self = this; 

    self.searchTerm = ko.observable(); 
    self.jobs = ko.observableArray(); 

    self.doSearch = function() { 
     // todo: empty search term handling 
     $.get('/home/search/', { 
      search: self.searchTerm() 
     }).done(function (data) { 
      self.jobs(data.Results); 
     }); 
    }; 
} 

var viewModel = new JobSearchForm(); 
ko.applyBindings(viewModel); 

相應的視圖：

<div class="row" id="jobs search"> 
    <input type="text" data-bind="value: searchTerm" class="form-control" placeholder='...' /> 
    <button data-bind="click: doSearch" class="typeahead search-submit btn btn-success btn-block">Search</button> 
    <div data-bind="foreach: jobs"> 
     <div class="jobs-list" data-bind="with: Document"> 
      <h3 class="job-title" data-bind="text: title"></h3> 
      <p data-bind="text: company"></p> 
      <p data-bind="text: description"></p> 
     </div> 
    </div> 
</div> 

綁定在哪裏視圖模型和視圖都應該進行交互的唯一場所。

因爲我不知道你的服務器返回什麼，我只能推測關於綁定的foreach。如有疑問，您可以隨時加入

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

在每次迭代中查看數據的可視化表示。或者您可以嘗試使用Chrome擴展程序進行更高級的調試。