使用 Knockout JS 进行数据绑定

Question

我无法绑定我的数据，然后使用 cshtml 显示它。我尝试了制作可观察数组的不同方法，我在想，我的主要问题来自于尝试利用我所谓的 "bounded-data"...以下是我的 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 绑定更改 element/section 的上下文。

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

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

新的 viewModel 现在是一个 'flat' 对象，直接包含所有属性。我不确定为什么要将输入框绑定到强制，所以我修改了它们以绑定到每个输入框的值属性。希望这能帮助您朝着正确的方向前进。

使用 Knockout JS 进行数据绑定

Data-Binding with Knockout JS

html

javascript

c#

twitter-bootstrap

knockout.js