2

我正在尝试创建一些选项卡，每个用户选择保存的配置文件一个。每个配置文件都是一个 ViewModel。所以我想我应该创建另一个 ViewModel，它包含一个 observableArray 类型的对象：{name: profile_name, model: model_converted_to_json}。

我按照这个例子创建了我的代码——但由于某种原因，我没有得到任何约束。

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

"use strict";
// profiles viewmodel class
define(["knockout"], function(ko) {
    return function() {
        var self = this;
        this.profilesArray = ko.observableArray();
        this.selected = ko.observable();
        this.addProfile = function(profile) {
            var found = -1;
            for(var i = 0; i < self.profilesArray().length; i++) {
                if(self.profilesArray()[i].name == profile.name) {
                    self.profilesArray()[i].model = profile.model; 
                    found = i;
                }
            }
            if(found == -1) {
                self.profilesArray().push(profile);
            }
        };
    };
});

-JS代码（大文件的摘录）：

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

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

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

我已经验证 observableArray 在按钮单击时确实获得了新的、正确的值——它只是没有被渲染。我希望这是我的 Knockout 数据绑定语法中缺少的一件小事。

谢谢你的时间！

4

2 回答 2

5

您将希望push直接调用 observableArray，它会推送到底层数组并通知任何订阅者。所以：

self.profilesArray.push(profile);
于 2012-11-07T20:32:33.787 回答
3

您正在使用name: $('#firstName').text();设置名称 .val()如果这是引用输入字段（我在这里假设），您可能需要将其更改为。

您正在使用.push()绕过 ko 订阅者的底层数组（本例中的绑定）

这是一个基于您的代码的工作 jsfiddle 。我采取了一些自由，model因为这不包括在内。

于 2012-11-07T20:43:06.810 回答