如何在基於數據綁定的挖空對象中加載特定元素？

Question

我想要做的是，我想加載基於特定敲除元素的挖空元素，數據綁定到鏈接。進一步說明如下：

我將一個挖空元素（稱爲applicationKey）綁定到下面的鏈接。

<div class="col-md-12" style="text-align: right"> 
      <a href="#" data-toggle="modal" data-target="#my_modal" data-bind="attr: { 'data-applicationKey': application.applicationKey }"> 
      Preview Application 
      </a> 
     </div> 

當我檢查鏈接的元件中，

<a href="#" data-toggle="modal" data-target="#previewApplicantModal" data-bind="attr: { 'data-applicationKey': application.applicationKey }" data-applicationkey="abc976cfx">                  
     Preview Application                  
</a> 

我可以看到applicationKey（數據applicationkey =「abc976cfx」），其是敲除內容被成功地綁定。

當我點擊鏈接，它應該給我說被編碼這樣一個模式：

<div id="previewApplicantModal" class="modal fade" tabindex="-1"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Applicant Preview</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <span>Applicant Location</span> 
        </div> 
        <div class="col-md-6"> 
         <div> 
         </div> 
        </div> 
       </div> 
       <div class="row small-margin-top" style="text-align:center"> 
        <a href="#">Read Full Profile</a> 
       </div> 

      </div> 

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

我想顯示是通過把

顯示的圖像上的「candidateLocation」元素

<span data-bind="text: application.candidateLocation"></span> 

的模型體內，但是當我做，我得到一個消息，說

Message: application is not defined 

我假設有一個具體的方式來做到這一點與淘汰賽js。我如何顯示我想要的knockout元素（在這種情況下爲candidateLocation），該元素對應於特定的挖空元素（在這種情況下爲applicationKey）？

請幫助！由於

編輯：Javscript科

<script type="text/javascript"> 

     $("#jobActionsPopup").dialog({ 
      dialogClass: "no-close", 
      position: { my: "middle top", at: "middle bottom", of: $("#jobActionsButton") }, 
      autoOpen: false, 
      draggable: true, 
     }).dialog("widget").find(".ui-dialog-titlebar").hide(); 


     function ViewModel() { 


    var self = this; 

    self.invite = ko.observable(false); 

    self.changeStylesInvite = function() { 
     self.invite(true); 
    } 

    self.notifications = ko.observableArray(@Html.Json(Model.Notifications.Select(o => o.JsonForm)) || []); 

    self.applications = ko.observableArray(@Html.Json(Model.ApplicationCompatibilities.Select(o => o.JsonForm)) || []); 
    self.applicationInvitations = ko.observableArray(@Html.Json(Model.ApplicationInvitations.Select(o => o.JsonForm)) || []); 

    self.applicationsFilter = ko.observable("new"); 
    self.showHiddenApplications = ko.observable(false); 

    self.newApplicationsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.applications(), function(i) { 
      return !i.application.isShortlisted && !i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden); 
     }).length; 
    }); 
    self.shortlistedApplicationsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.applications(), function(i) { 
      return i.application.isShortlisted && (self.showHiddenApplications() || !i.application.isHidden); 
     }).length; 
    }); 
    self.connectedApplicationsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.applications(), function(i) { 
      return i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden); 
     }).length; 
    }); 
    self.allApplicationsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.applications(), function(i) { 
      return (self.showHiddenApplications() || !i.application.isHidden); 
     }).length; 
    }); 
    self.filteredApplications = ko.computed(function() { 
     if(self.applicationsFilter() == 'new') { 
      return ko.utils.arrayFilter(self.applications(), function(i) { 
       return !i.application.isShortlisted && !i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden); 
      }); 
     } 
     else if(self.applicationsFilter() == 'shortlisted') { 
      return ko.utils.arrayFilter(self.applications(), function(i) { 
       return i.application.isShortlisted && (self.showHiddenApplications() || !i.application.isHidden); 
      }); 
     } 
     else if(self.applicationsFilter() == 'connected') { 
      return ko.utils.arrayFilter(self.applications(), function(i) { 
       return i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden); 
      }); 
     } 
     else if(self.applicationsFilter() == 'all') { 
      return ko.utils.arrayFilter(self.applications(), function(i) { 
       return (self.showHiddenApplications() || !i.application.isHidden); 
      }); 
     } 
     else { 
      console.error('error in filteredApplications, unhandled applicationsFilter: ' + self.applicationsFilter()); 
      return self.applications(); // return all by default 
     } 
    }); 

    self.interviews = ko.observableArray(@Html.Json(Model.Interviews.Select(o => o.JsonForm)) || []); 
    self.offers = ko.observableArray(@Html.Json(Model.Offers.Select(o => o.JsonForm)) || []); 

    self.bulkHideApplications = ko.computed(function() { 
     return ko.utils.arrayFilter(self.applications(), function(i) { 
      return !i.application.isShortlisted && !i.application.isContactInfoSent && !i.application.isHidden; 
     }); 
    }); 
    self.bulkHideApplicationKeys = ko.computed(function() { 
     return self.bulkHideApplications().map(function(obj) { return obj.application.applicationKey; }).join(); 
    }); 

    self.jobQuestions = ko.observableArray(@Html.Json(Model.Job.JobQuestions.Select(o => o.JsonForm)) || []); 
    self.jobQuestionsFilter = ko.observable("new"); 
    self.newJobQuestionsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
      return !i.ignored && i.answer == null; 
     }).length; 
    }); 
    self.ignoredJobQuestionsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
      return i.ignored; 
     }).length; 
    }); 
    self.answeredJobQuestionsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
      return i.answer != null; 
     }).length; 
    }); 
    self.allJobQuestionsCount = ko.computed(function() { 
     return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
      return true; 
     }).length; 
    }); 
    self.filteredJobQuestions = ko.computed(function() { 
     if(self.jobQuestionsFilter() == 'new') { 
      return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
       return !i.ignored && i.answer == null; 
      }); 
     } 
     else if(self.jobQuestionsFilter() == 'ignored') { 
      return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
       return i.ignored; 
      }); 
     } 
     else if(self.jobQuestionsFilter() == 'answered') { 
      return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
       return i.answer != null; 
      }); 
     } 
     else if(self.jobQuestionsFilter() == 'all') { 
      return ko.utils.arrayFilter(self.jobQuestions(), function(i) { 
       return true; 
      }); 
     } 
     else { 
      console.error('error in filteredJobQuestions, unhandled jobQuestionsFilter: ' + self.jobQuestionsFilter()); 
      return self.jobQuestions(); // return all by default 
     } 

    }); 

    self.ignoreJobQuestion = function(jobQuestion) { 
     handle(jobQuestion, "&action=ignore"); 
    }; 
    self.answerJobQuestion = function(jobQuestion) { 
     handle(jobQuestion, "&action=answer"); 
    }; 
    self.editJobQuestion = function(jobQuestion) { 
     handle(jobQuestion, "&action=edit"); 
    }; 
    self.makePublicJobQuestion = function(jobQuestion) { 
     handle(jobQuestion, "&action=makePublic"); 
    }; 
    self.makePrivateJobQuestion = function(jobQuestion) { 
     handle(jobQuestion, "&action=makePrivate"); 
    }; 
    function handle(jobQuestion, actionQueryString) { 
     $.ajax({ 
      type: "POST", 
      url: '@MVC.GetLocalUrl(MVC.HireOrgJob.AjaxAnswerQuestion(Model.Job))', 
      data: $('form#jobQuestionForm_' + jobQuestion.id).serialize() + actionQueryString, 
      success: function (msg) { 
       var index = self.jobQuestions.indexOf(jobQuestion); 
       self.jobQuestions.remove(jobQuestion); // remove and splice instead of replacing because the object properties are not ko.observables, so remove and insert will update the UI 
       self.jobQuestions.splice(index, 0, msg); 
      }, 
      error: function() { 
       alert("failure"); 
      } 
     }); 
    }; 
}; 

var viewModel; 
$(function() { 
    viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 

    $('form#pauseJobForm').ajaxForm(function(msg) { 
     alert('paused'); 
     location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#unpauseJobForm').ajaxForm(function(msg) { 
     alert('resumed'); 
     location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#endJobForm').ajaxForm(function(msg) { 
     alert('closed'); 
     location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#SetViewProfileModeForm').ajaxForm(function(msg) { 
     alert('saved view profile mode: ' + JSON.stringify(msg)); 
     //location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#setBiasFreeModeForm').ajaxForm(function(msg) { 
     alert('saved bias free mode: ' + JSON.stringify(msg)); 
     location.reload(); // refresh the page to change the knockout viewmodels (name, etc.) 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 
    $('form#hideMultipleApplicationsForm').ajaxForm(function(msg) { 
     alert("saved"); 
     location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#inviteToApplyForm').ajaxForm(function(msg) { 
     viewModel.applicationInvitations.push(msg); 
     $('.modal').modal('hide'); 
     alert('invited!'); 
     //location.reload(); // refresh page to show result 
     // nothing to do with the result... viewModel.isHidden(false); 
    }); 

    $('form#addManualApplicationForm').ajaxForm(function(msg) { 
     viewModel.applications.push(msg); 
     $('.modal').modal('hide'); 
     $('form#addManualApplicationForm').resetForm(); 
     $('#showNickNameFullNameA').show(); 
     $('#nickNameFullNameDiv').hide(); 
     $('#addCoverLetterA').show(); 
     $('#addCoverLetterDiv').hide(); 
     $('#addTextResumeA').show(); 
     $('#addTextResumeDiv').hide(); 

    }); 
}); 

    </script> 
} 

Answer 1

我會用一個可觀察的視圖模型來跟蹤當前應用的，將要在模式顯示的一個。它的名字可以是「currentApplication」。

這是一個可行的的jsfiddle： https://jsfiddle.net/matiasm/3v3c7hkf/4/

在你的錨標記

function application (applicationKey, location) 
{ 
    this.applicationKey = ko.observable(applicationKey); 
    this.candidateLocation = ko.observable(location); 
}; 


function ApplicationsVM(){ 

    var self = this; 

    this.currentApplication = ko.observable(""); 

    this.setCurrentApplication = function(model){ 
     self.currentApplication(model); 
    }; 


    this.applicationList = ko.observableArray([ 
     new application('key1', 'location1'), 
     new application('key2', 'location3'), 
     new application('key3', 'location4'), 
     new application('key4', 'location5'), 
     new application('key5', 'location6'), 
     new application('key6', 'location7') 
    ]); 
}; 

var vm = new ApplicationsVM(); 
ko.applyBindings(vm); 

然後使用click事件來設置當前的應用程序：

<ul data-bind="foreach : applicationList"> 
    <li> <a href="#" data-bind="click : $root.setCurrentApplication" data-toggle="modal" data-target="#previewApplicantModal"> <span data-bind="text: applicationKey" ></span> </a> </li> 
</ul> 

最後，在你的模式，你可以使用「用」綁定而不是點符號：

<div class="col-md-6" data-bind="with: currentApplication"> 
    <span data-bind="text: candidateLocation"></span>  
</div>