KnockoutJS不会在“ With”绑定上下文内填充可观察到的$ root

Question

I've searched and searched for an answer, so hope I haven't duplicated this anywhere.

I am using ASP .NET MVC5, with KnockoutJS as my ORM.

For some reason, data isn't being populated in the DOM when I try to reference back to the ViewModel using the $root binding context (Once inside the "with" binding context)

The with binding context is declared in a normal mvc view razor page, however I am using the $root binding context inside a partial view which is loaded into the main view.

Has anyone had any problems like this or can spot my error? I will paste my viewmodel and html code below.

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

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

If anyone needs anymore information, feel free to ask.

Answer 1

I think I've spotted it, and it's fairly simple:

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

you are using a text-binding on the input field, so updating the input won't change the observable. Use a value-binding instead:

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