KnockoutJS沒有在「With」綁定上下文中填充$ root observable

Question

我已經搜索並搜索了一個答案，所以希望我沒有在任何地方重複這個。

我使用ASP .NET MVC5，KnockoutJS作爲我的ORM。

出於某種原因，數據不被在DOM填充，當我嘗試使用$根結合上下文（一旦進入「與」結合上下文）

引用回視圖模型的結合與背景是在一個正常的mvc視圖剃鬚刀頁面中聲明的，但是我在加載到主視圖中的部分視圖中使用$ root綁定上下文。

有沒有人有這樣的問題，或可以發現我的錯誤？我將在下面粘貼我的viewmodel和html代碼。

視圖模型

var ProfileViewModel = function() { 
    var self = this; 
    this.Member = ko.observable(); - With Binding to this 
    this.SocialNetworks = ko.observableArray(); 
    this.Skills = ko.observableArray(); 
    this.SkillsFilter = ko.observable(""); - Trying to access these from root 
    this.FilteredSkills = ko.observableArray(); 
    this.References = ko.observableArray(); 
    this.Has = function (has_what) { 
     if (has_what) { 
      if (has_what.length > 0) { 
       return true; 
      } else { 
       return false; 
      } 
     } 

     return false; 
    }; 

    $.getJSON("/doitgrad/api/member/CameronPearce91", function (allData) { 
     self.Member(new DoItGrad.Objects.Member(allData, true)); 
     self.FilteredSkills = ko.computed(function() { 
      return ko.utils.arrayFilter(self.Skills(), function (item) { 
       var filter = self.SkillsFilter(), 
        doesnthaveskill = (jQuery.inArray(item, self.Member().details.skills()) == -1), 
        containsfiltertext = (item.title().indexOf(filter) > -1); 

       if (filter != "") { 
        return (doesnthaveskill && containsfiltertext); 
       } else { 
        return doesnthaveskill; 
       } 
      }); 
     }); 
    }) 

    $.getJSON("/doitgrad/api/skill/", function (allData) { 
     var mappedSkills = $.map(allData, function (item) { return new DoItGrad.Objects.Skill(item); }); 
     self.Skills(mappedSkills); 
    }); 
} 

var model = new ProfileViewModel(); 
ko.applyBindings(model); 

MVC視圖

<section id="profile-details" data-bind="with: Member"> 
<section id="profile-cover"> 
    <!-- ko if: details.images.cover() == null --> 
     <img src="/DoitGrad/Content/images/Profile/default_cover.jpg"> 
    <!-- /ko --> 
    <!-- ko ifnot: details.images.cover() == null --><!-- /ko --> 
    <section class="change-cover">Change cover photo</section> 
    <section id="profile-picture"> 
     <!-- ko if: details.images.profile() == null --> 
      <img src="/DoitGrad/Content/images/Profile/default_avatar.png"> 
     <!-- /ko --> 
     <!-- ko ifnot: details.images.profile() == null --><!-- /ko --> 

     <h2 id="profile-name" data-bind="text: title">Cameron Pearce</h2> 
     <section id="profile-username" data-bind="text: details.username">CameronPearce91</section> 
    </section> 
</section> 
<section id="profile-wrapper"> 
    <section id="profile-about" data-bind="text: description">Since I have been at uni, I believe I have achieved a lot. I took a year out of my studies to do a work placement year with Xerox based in Welwyn Garden City, primarily focusing on developing C# Web Applications on the MVC framework. It was the best thing I could have done for my career I believe, I have certainly learnt a lot.</section> 

@Html.Partial("partialname") 

管窺

<section class="profile-detail-holder"> 
    <section class="add" data-form="addSkill">+</section> 
    <h2 class="profile-detail-header">Skill Wall</h2> 
    <ul id="profile-skillwall" data-bind="foreach: details.skills()"></ul> 
</section> 

<section class="dialog-form" data-form="addSkill"> 
    <section class="form-cover grey"></section> 
    <section class="form-content"> 
     <section class="form-wrap"> 
      <section class="form-close">x</section> 
      <header class="form-header">Add Skill</header> 
      <section class="form-body"> 
       <form id="dig-member-addskill" class="area" method="post" action="#"> 
        <input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input> 
        <ul data-bind="foreach: $root.FilteredSkills"></ul> 
        <section class="ui-button submit"> 
         <input type="submit" value="Add"> 
        </section> 
       </form> 
      </section> 
     </section> 
    </section> 
</section> 

如果有人需要了信息，感覺隨意問。

Answer 1

我想我已經發現了它，它是相當簡單：

<input type="text" data-bind="text: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input> 

您使用的是文字結合的輸入欄，所以更新輸入不會改變觀測。使用值綁定來代替：

<input type="text" data-bind="value: $root.SkillsFilter" placeholder="Filter list of skills..." class="ui-textbox"></input>