Javascript 使用Knockout.js foreach创建引导选项卡

我正在尝试创建一些选项卡，每个用户选择保存的配置文件一个。每个纵断面都是一个ViewModel。所以我想我应该创建另一个ViewModel，它包含类型为{name:profile\u name，model:model\u converted\u to\u json}的对象的ObservalArray

我跟随创建了我的代码——但出于某种原因，我没有得到任何约束

这是我的代码：
-ViewModel（我使用Requirejs，它解释了外部包装）：

-HTML（感谢Sara更正了我的HTML标记）

我已经验证了ObservalArray确实在点击按钮时获得了新的、正确的值——它只是没有得到渲染。我希望这是我在淘汰数据绑定语法中缺少的一点小东西

---

谢谢你的时间

您需要直接在ObservalArray上调用

push

，这将推送到底层阵列并通知任何订阅者。因此：

self.profilesArray.push(profile);

---

您正在使用

name:$（'#firstName'）.text（）设置名称。

；如果引用的是输入字段（我在这里假设），则可能需要将其更改为

.val（）

您正在绕过ko的订户（本例中的绑定）的基础阵列上使用

.push（）

---

这里是基于您的代码。我对

模型

有一些自由，因为它没有包括在内。

这可能会帮助解决您的html问题，这正是我尝试过的（并且只是重复了几次）-但是，html代码没有显示您的有序列表干扰了代码格式。谢谢Sara！就这样。现在我已经列出了我所有的代码。感谢@kato（我喜欢JSFIDLE）的巨大努力。推（）是答案，但有人抢先一步：）。至于.text（）-值实际上来自页面上的，而不是字段。我的荣幸！（我有时想知道@RPNiemeyer是否是一台超级计算机，它被保存在一个特殊的地下设施中，只是为了在我之前回答问题，然后我记得他实际上不必是超级计算机来回答问题）是的，他真的是一台超级计算机。

var profiles = new profilesViewMode();
ko.applyBindings(profiles, $("#profileTabs")[0]); 
$("#keepProfile").on("click", function() {
    var profile = {
        name: $("#firstName").text(),
        model: ko.toJSON(model)
    };
    profiles.addProfile(profile);
    profiles.selected(profile);
    console.log(profile);
    $("#profileTabs").show();
});

<section id="profileTabs">
    <div>
        <ul class="nav nav-tabs" data-bind="foreach: profilesArray">
            <li data-bind="css: { active: $root.selected() === $data }">
                <a href="#" data-bind="{ text: name, click: $root.selected }"></a>
            </li>
        </ul>
    </div>
</section>

self.profilesArray.push(profile);