Knockout映射插件檢索到的viewModel對象與更新的對象之間的不一致

Question

我正在嘗試將新對象添加到我的基因剔除映射插件中，將其加載到viewmodel中，如下所示：

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

。 。 。 和我用THIS語法添加的行：

myViewModel.WW2Machines（）[3] .fighter（）。Name（）

。 。 。 並且在各個下標之間相互切換語法會引發錯誤。 這可能是為什么我的行被添加為空白的線索，但是我不知道為什么？ 有人可以幫忙嗎？

Answer 1

至少某些問題以及您在底部遇到的令人困惑的差異的解釋是，稍后添加的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()

Answer 2

艾德里安（Adrien），您能否提供一個解釋，為什么映射插件無法使WarCraft.fighter可見？ 我認為使用插件映射的所有對象和子屬性默認為可觀察的。 謝謝，