KnockoutJS不會在“ With”綁定上下文內填充可觀察到的$ root

Question

我已經搜索了答案，所以希望我沒有在任何地方重復此內容。

我正在使用ASP .NET MVC5，並將KnockoutJS作為我的ORM。

出於某種原因，當我嘗試使用$ root綁定上下文引用一次ViewModel時（在“ with”綁定上下文內），數據沒有被填充到DOM中。

with綁定上下文是在普通的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>