KnockoutJS没有在“With”绑定上下文中填充$ root observable

我已经搜索并搜索了一个答案，所以希望我没有在任何地方重复这个。

我使用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>

如果有人需要了信息，感觉随意问。

来源

2014-02-24 Cameron Pearce

您可以显示什么$根包含使用

内“同向”结合 –

好，只是去尝试，似乎observableArray FilteredSkills不填充什么？但是，如果我在控制台中引用模型，则会填充数据..任何想法？ –

我想我已经发现了它，它是相当简单：

<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>

来源

2014-02-24 15:51:15

这已经很好的文本框工作！尽管使用可观察数组“FilteredSkills”，但我在填充无序列表时遇到了问题。我已经将$ root转换为json，并且模型没有可观察数组中的任何数据，但是如果我使用chrome控制台引用它，则会填充正确的数据... –

如何显示列表？你的ul elemnt是空的

–

很抱歉忘记在问题中加入标记：

–

KnockoutJS没有在“With”绑定上下文中填充$ root observable

回答

相关问题