0

我正在尝试将新对象添加到我的淘汰赛映射插件下载的视图模型中，如下所示：

<script type="text/javascript">
    var myViewModel = {};

    var Fighter = function (data) {
        var self = this;
        self.Name = ko.observable(data.Name);
        self.Country = ko.observable(data.Country);
        self.TopSpeed = ko.observable(data.TopSpeed);
    };

    var WarCraft = function (data) {
        var self = this;
        self.fighter = ko.observable(data.fighter);
    };

    var dataMappingOptions = {
        key: function (data) {
            return data.id;
        },
        create: function (options) {
            if (data.id == 1)
                return new Fighter(options.data);
            else
                if (data.id == 2)
                    return new WarCraft(options.data);
        }
    };

    $.getJSON("/Home/GetServerData", function (model) {
        ko.mapping.fromJS(model, dataMappingOptions, myViewModel);

        ko.applyBindings(myViewModel);

    }).error(function () { alert("Oops!") }).success(function () { alert("Yeah!") });


    myViewModel.AddToData = function () {
        var newFighter = new Fighter(
                        {
                            id : 1,
                            Name: myViewModel.warCraft.fighter.Name(),
                            Country: myViewModel.warCraft.fighter.Country(),
                            TopSpeed: myViewModel.warCraft.fighter.TopSpeed() 
                        });
        var newWarCraft = new WarCraft({ id: 2, fighter: newFighter });
        myViewModel.WW2Machines.push(newWarCraft);
    }.bind(myViewModel);


</script>

服务器端模型：

 DataModel model = new DataModel();
 model.warCraft = new WarCraft();
 model.warCraft.fighter = new Fighter();
 model.warCraft.fighter.Name = "Spitfire";
 model.WW2Machines = new List<WarCraft>();

 WarCraft w1 = new WarCraft();
 w1.fighter = new Fighter() { Name = "Spitfire" };
 model.WW2Machines.Add(w1);

 WarCraft w2 = new WarCraft();
 w2.fighter = new Fighter() { Name = "Hurricane" };
 model.WW2Machines.Add(w2);

 WarCraft w3 = new WarCraft();
 w3.fighter = new Fighter() { Name = "Tomcat" };
 model.WW2Machines.Add(w3);

... Ajax 调用调用的方法，它初始化并发送数据：

DataModel model = new DataModel();
model.warCraft = new WarCraft();
model.warCraft.fighter = new Fighter();
model.warCraft.fighter.Name = "Spitfire";
model.WW2Machines = new List<WarCraft>();

WarCraft w1 = new WarCraft();
w1.fighter = new Fighter() { Name = "Spitfire" };
model.WW2Machines.Add(w1);

WarCraft w2 = new WarCraft();
w2.fighter = new Fighter() { Name = "Hurricane" };
model.WW2Machines.Add(w2);

WarCraft w3 = new WarCraft();
w3.fighter = new Fighter() { Name = "Tomcat" };
model.WW2Machines.Add(w3);

return Json(model, JsonRequestBehavior.AllowGet);

. . . 和我的html：

<div id="show" data-bind="visible: WW2Machines().length>0">
    <h2>Information Display:</h2>
    NewNumber : <span data-bind="text: WW2Machines().length"></span>
    <ul data-bind="foreach: WW2Machines">
        <li>
            Name: <span data-bind="text: fighter.Name"></span>
            <br>&nbsp;</br>
        </li>
    </ul>
</div>

<div id="theForm">
    @using (Html.BeginForm())
    {
        <legend WW2 Fighter Planes: >
            <fieldset>
                Name:
                <br>&nbsp;</br>
                <select data-bind="value: warCraft.fighter.Name, optionsCaption: 'Please Select . . '">
                    <option>Mosquito</option>
                    <option>Mustang</option>
                    <option>Messerschmidt 109</option>
                </select>
                <br>&nbsp;</br>
                <span data-bind="text: warCraft.fighter.Name"></span>
                <br>&nbsp;</br>

                Country:
                <br>&nbsp;</br>
                <select data-bind="value: warCraft.fighter.Country, optionsCaption: 'Please Select . . '">
                    <option>England</option>
                    <option>USA</option>
                    <option>Germany</option>
                </select>
                <br>&nbsp;</br>
                <span data-bind="text: warCraft.fighter.Country"></span>
                <br>&nbsp;</br>

                Top Speed:
                <br>&nbsp;</br>
                <select data-bind="value: warCraft.fighter.TopSpeed, optionsCaption: 'Please Select . . '">
                    <option>390 km/h</option>
                    <option>275 km/h</option>
                    <option>250 km/h</option>
                </select>
                <br>&nbsp;</br>
                <span data-bind="text: warCraft.fighter.TopSpeed"></span>                

                <input type="button" data-bind="click: AddToData">Add</input>

            </fieldset>

        </legend>

}

问题是我的添加按钮被触发并且确实将行添加到显示区域，除了它们是空的。在 Firefox 的调试器控制台中，我看到我可以引用从服务器发送的行和由添加按钮添加的行（正确包含数据），但有一个令人费解的区别：我使用以下语法访问现有行：

myViewModel.WW2Machines()[0].fighter.Name()

. . . 和我用这个语法添加的行：

myViewModel.WW2Machines()[3].fighter().Name()

. . . 并且为各自的下标在彼此之间交换语法会引发错误。这可能是为什么我的行被添加为空白的线索，但我不知道为什么？有人可以帮忙吗？

4

2 回答 2

0

Adrien，您能否解释一下为什么映射插件不能让 WarCraft.fighter 可观察？我认为使用插件映射的所有对象和子属性默认为可观察的。谢谢，

于 2013-07-03T12:31:09.010 回答
0

至少有一些问题——以及对你在底部遇到的令人费解的差异的解释——是你稍后添加的行可以WarCraft.fighter观察到，而映射插件没有这样做。

所以你可以交换这个：

var WarCraft = function (data) {
    var self = this;
    self.fighter = ko.observable(data.fighter);
};

为了这

var WarCraft = function (data) {
    var self = this;
    self.fighter = data.fighter;
};

并且您应该能够以相同的方式访问映射数据和添加的数据：

myViewModel.WW2Machines()[0].fighter.Name()
于 2013-07-03T06:11:17.237 回答