使用 Knockout JS 进行数据绑定

Question

我遇到了无法绑定我的数据然后使用 cshtml 显示它的问题。我尝试了不同的方法来制作可观察的数组，我在想，我的主要问题来自于试图利用我所谓的“有界数据”......以下是我的 cshtml(c#-html) 代码，然后是我的 js 代码。

 <!--*****Unfinished*****-->
                    <td>
                        <label class="element-label">Continuous (Vibratory) Acceleration</label>
                        <select class="form-control device-family-selector" , data-bind="options: changeAuxFlange.availableVForces, optionsText: 'forceName', value: changeAuxFlange.selectedForces, optionCaption: 'Choose a force...'"></select>
                    </td>
                    <td>
                        <input style="width:50px; text-align:right;" , data-bind="text: changeAuxFlange.selectedForces" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="element-label">Maximum (Shock) Acceleration</label>
                        <select class="form-control device-family-selector" , data-bind="options: changeAuxFlange.availableSForces, optionsText: 'forceName', value: changeAuxFlange.selectedForces, optionCaption: 'Choose a force...'"></select>
                    </td>
                    <td>
                        <input style="width:50px; text-align:right;" , data-bind="value: changeAuxFlange.selectedForces" />
                    </td>
                    <!--**********-->

查看模型：

"use strict";
function ViewModel()
{
    // it would make more sense with the current setup to make the ViewModel be the Application, but I have set it up like this in case some day it is desired that this tool creates multiple applications in one session
    this.application = ko.observable(new Application('New Application', this));
    this.requestSearchMode = ko.observable(false);
}

function Application(name, parentViewModel)
{....
this.sections =
    {
        gForceSection: initGforceSection(this),
        pumpSection: initPumpSection(this),
        calcLoadsSection: initCalcLoadsSection(this)
    }....
}

    function initGforceSection(application)
{
    var data = ko.observableArray();

    var gForceSection = new Section('G-Forces', data, application);


    var self = this;
    var Force = function (name, value) {
        this.forceName = name;
        this.forceValue = value;
    };
    var vibForce = {
        availableVForces: ko.observableArray([
            { vForce: "Skid steer loader", value: 4 },
            { vForce: "Trencher (rubber tires)", value: 3 },
            { vForce: "Asphalt paver", value: 2 },
            { vForce: "Windrower", value: 2 },
            { vForce: "Aerial lift", value: 1.5 },
            { vForce: "Turf care vehicle", value: 1.5 },
            { vForce: "Vibratory roller", value: 6 }
        ]),
        selectedForces: ko.observable()
    };
    var shockForce = {
        availableSForces: ko.observableArray([
            { sForce: "Skid steer loader", value: 10 },
            { sForce: "Trencher (rubber tires)", value: 8 },
            { sForce: "Asphalt paver", value: 6 },
            { sForce: "Windrower", value: 5 },
            { sForce: "Aerial lift", value: 4 },
            { sForce: "Turf care vehicle", value: 4 },
            { sForce: "Vibratory roller", value: 10 }
        ]),
        selectedForces: ko.observable()
    };


    gForceSection.families = ko.observableArray();
    productData.getPumpFamilies(function (data) {
        gForceSection.families(data);
        addPump(application);
    });

    gForceSection.tbxNumberofPumps = ko.computed(function () { return gForceSection.data().length });

    return gForceSection;
}
//CREATE VIEWMODEL
var viewModel = new ViewModel;

ko.applyBindings(viewModel);
/******/

Answer 1

viewModels 是一系列嵌套对象，这使得引用非常复杂。我可以看到您正在尝试对数据进行逻辑结构化，但这很难提供帮助。 Knockout 有一个context 用于绑定，它从绑定的视图模型开始。您可以使用 with 绑定更改元素/部分的上下文。

否则你必须给 Knockout 一个完整的路径，例如data-bind="value: app.gforcesection.someitem.someProperty - 如果路径中的项目未定义，这可能会导致错误。

我已经删除了很多结构，使其成为一个可以尝试提供帮助的工作示例： http://jsfiddle.net/Quango/3y9qhnv9/

新的 viewModel 现在是一个“平面”对象，其上直接包含所有属性。我不确定你为什么将输入框绑定到 force，所以我修改了它们以绑定到每个输入框的 value 属性。希望这可以帮助您朝着正确的方向前进。